<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jquery的ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
在学jquery_ajax前,我们需要直到javascript中ajax对象的一些属性和方法
ajax的核心是XMLHttpRequest对象
XMLHttpRequest对象的所有属性
1.onreadystatechange 指定当readyState属性改变时的事件处理句柄
2.readyState 返回当前请求的状态
3.status 返回当前请求的http状态码.
4.statusText 返回当前请求的响应行状态
5.responseBody 将回应信息正文以unsigned byte数组形式返回
6.responseStream 以Ado Stream对象的形式返回响应信息
7.responseTest 将响应信息作为字符串返回
8.responseXML 将响应信息格式化为Xml Document对象并返回
XMLHttpRequest对象的所有方法
1.abort() 取消当前请求
2.getAllResponseHeader()获取响应的所有http头
3.getResponseHeader() 从响应信息中获取指定的http头
4.open() 创建一个新的http请求，并指定此请求的方法、URL以及验证信息
5.send() 发送请求到http服务器并接收回应
6.setRequestHeader() 单独指定请求的某个http头
*/
/*
1.实例化一个XMLHttpRequest对象
*/
function getXmlHttp() {
if (window.XMLHttpRequest) { // Mozilla、Safari等浏览器
return new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE浏览器
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX");
}
}
}
}
/*
从普通txt文本中获取内容
*/
//获取XMLHttpRequest对象
//xmlHttp = getXmlHttp();
//创建和服务器的连接
// xmlHttp.open("get","hello.txt",false);
//向服务器发送请求并接收回应
//xmlHttp.send(null);
//alert(xmlHttp.responseText);//会弹出hello.txt里的内容
/*
需要注意的是,我们必须把XMLHttpRequest的open方法的参数必须搞清楚
官方文档上是这样的原型:
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数解释:
1.bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感
2.bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址
3.varAsync 布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数
4.bstrUser 如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口
5.bstrPassword 验证信息中的密码部分，如果用户名为空，则此值将被忽略
如果我们将上述代码中的第三个参数改为true的话,会发现,我们得不到服务器hello.txt文本的信息,因为采用
异步传输的方法的话,必须要指定当readyState属性改变时的事件
*/
/*
下面我们使用异步方式从服务器hello.php中获得数据,php代码很简单,如下:
<?php
echo 'hello,php';
?>
*/
//xmlHttp.open("get","hello.php",true);
//这里的getTextFromPhp只是一个函数句柄
// xmlHttp.onreadystatechange = getTextFromPhp;
///xmlHttp.send(null);
//function getTextFromPhp(){
// if (xmlHttp.readyState == 4){
//会弹出hello,php,说明错哦从服务器端获取到了数据
// alert(xmlHttp.responseText);
// }
// };
/*
我们将上述的代码再稍微修改下,带上参数给hello.php,并让php文件返回我们
输入的内容
*/
function ajax(){
var xmlHttp = getXmlHttp();
var content = document.getElementById("name").value;
var bstrUrl = "hello.php";
bstrUrl = bstrUrl+"?param="+content;
var bstrMethod = "GET";
var varAsync = true;
xmlHttp.open(bstrMethod,bstrUrl,varAsync);
xmlHttp.onreadystatechange = getdata;
xmlHttp.send(null);
function getdata(){
//readyState返回XMLHTTP请求的当前状态
//值为4表示数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if(xmlHttp.readyState == 4){
//status=200表示ok,不要也没事
if(xmlHttp.status == 200){
alert(xmlHttp.responseText);//这里IE会出现乱码问题FireFox和chorme可以
}
}
}
}
/*
hello.php代码如下:
<?php
$content = $_GET['param'];
echo 'hello'.$content;
?>
*/
/*
这里使用Jquery的ajax
1.ajax() 执行一个异步的HTTP(ajax)请求
2.ajaxComplete() 当ajax请求完成后注册的一个回调函数,是一个ajax事件
3.ajaxError() ajax请求出错的时注册一个回调函数,也是一个ajax事件
4.ajaxSend() 每当一个ajax请求即将发送时注册的一个回调函数是一个ajax事件
5.ajaxSetup() 设置未来的ajax请求默认选项
6.ajaxStart() 在ajax请求刚开始时执行一个处理函数
7.ajaxStop() 在ajax请求停止后隐藏加载信息
8.ajaxSuccess() 当ajax请求成功完成后显示的一个信息
9.get() 通过GET方法加载数据
10.getJSON() 通过get方法获取JSON格式的数据
11.getScript() 通过get方法获取脚本格式的数据
12.load() 载入远程html代码并插入语至dom中
13.param() 创建一个序列化的数组或者对象,适用于一个URL地址查询字符串或者ajax请求
14.post() 通过post方法加载数据
15.serialize() 将用作提交的表单元素的值编译成字符串
16.serializeArray() 将用作提交的表单元素的值编译成拥有name/value对象组成的数组
*/
$(function(){
//第一种格式
$("#jquery_ajax1").click(function(){
$.get("hello.txt",function(data){
alert("服务器端数据:"+data);
});
});
//第二种格式
$("#jquery_ajax2").click(function(){
var url = "hello.php";
var content = $("#name").val();
var value = "felayman";
$.get(url,{key1:content,key2:value},getdata);
function getdata(data){
alert(data);
}
});
});
var xmlHttp = getXmlHttp();
function ajax(){
var content = document.getElementById("name").value;
xmlHttp.open("post","hello.php",false);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送Post方式的键值对
xmlHttp.send("name=felayman");
alert(xmlHttp.responseText);
}
//向上述的都是比较简单的ajax数据传输,下面看看稍微复杂的ajax
/*
$.ajax()的官方给出的参数如下:
jQuery.ajax([settings])可以看出他的参数为一系列的json,
可以通过 $.ajaxSetup() 设置任何选项的默认值。
其主要参数为:
1.options 可选。AJAX 请求设置
2.async 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
3.beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头
4.cache 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面
5.complete 请求完成后回调函数 (请求成功或失败之后均调用)。
6.contentType 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型
7.context 这个对象用于设置 Ajax 相关回调函数的上下文
8.dataObject 发送到服务器的数据
9.dataFilter 给 Ajax 返回的原始数据的进行预处理的函数
10.dataType 预期服务器返回的数据类型
11.error 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
12.global 是否触发全局 AJAX 事件。默认值: true
13.ifModified 仅在服务器数据改变时获取新数据
14.jsonp 在一个 jsonp 请求中重写回调函数的名字
15.jsonpCallback 为 jsonp 请求指定一个回调函数名
16.password 用于响应 HTTP 访问认证请求的密码
17.processData 默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false
18.scriptCharset 只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset
19.success 请求成功后的回调函数。
20.traditional 如果你想要用传统的方式来序列化数据，那么就设置为 true
21.timeout 设置请求超时时间（毫秒）。
22.type 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。
23.url 默认值: 当前页地址。发送请求的地址。
24.username 用于响应 HTTP 访问认证请求的用户名。
25.xhr 需要返回一个 XMLHttpRequest 对象
当看到这么长长的参数设置的时候,真很郁闷,不过我们只需要了解其常用的即可.
*/
$(function(){
$("#jquery_ajax1").click(function(){
$.ajax({
type:"post", //常用 以何种方式进行数据传输
url:"hello.php", //常用 数据发送哪哪个服务器文件
dataType:"text", //常用 服务器返回的数据类型
data:"name=felayman&age=22", //常用 传输给服务器的参数
cache:true, //常用 是否开启缓存
async:true, //常用 默认为true,是否开启异步传输
success:function(data){ //常用 ajax请求成功后的回调函数
alert(data);
}
});
});
});
/*
AJAX的响应状态
1.0 0表示还没有初始化,但是XMLHttpRequest对象已经建立但未初始化,但是还没有调用open方法
2.1 初始化,表示对象已经建立,调用了open()方法,尚未调用send()方法
3.2 发送数据,表示send()方法已经调用,但是当前的状态以及HTTP头未知
4.3 数据正在传送中,已经接收了部分数据,但是响应以及HTTP头信息不全,
5.4 客户端接收数据完成,可以通过response来获取完整的响应数据
*/
function ajax(){
var xmlHttp = getXmlHttp();
var content = document.getElementById("name").value;
var bstrUrl = "hello.txt";
bstrUrl = bstrUrl;
var bstrMethod = "GET";
var varAsync = true;
xmlHttp.open(bstrMethod,bstrUrl,varAsync);
xmlHttp.onreadystatechange = getdata;
xmlHttp.send(null);
function getdata(){
//readyState返回XMLHTTP请求的当前状态
//值为4表示数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
var status = xmlHttp.readyState;
switch (status){
case 0:
alert("还没有初始化.");//由于还未初始化,所以无法获取状态,即永不会弹出
case 1:
alert("刚初始化,已经调用了open");
case 2:
alert("准备发送数据");
case 3:
alert("数据发送中");
case 4:
alert("数据接收完毕");
}
}
}
$(function(){
$("#jquery_ajax1").click(function(){
/*
Jquery的ajax事件
1.ajaxStart ajax请求开始的时候进行响应
2.ajaxSend ajax请求发送前进行响应
3.ajxComplete ajax请求完成时进行响应
4.ajaxSuccess ajax请求成功时进行响应
5.ajaxStop ajax请求结束时进行响应
6.ajaxError ajax请求发送过程中出现错误时进行响应
*/
$.ajax({
type:"post",
url:"hello.php",
data:"name=felayman&age=22"
});
$("#ajax").ajaxStart(function(){
alert("ajax请求即将开始");
});
$("#ajax").ajaxSend(function(){
alert("ajax请求数据即将发送");
});
$("#ajax").ajaxComplete(function(){
alert("ajax请求完成");
});
$("#ajax").ajaxSuccess(function(){
alert("ajax请求成功");
});
$("#ajax").ajaxStop(function(){
alert("ajax请求被结束");
});
$("#ajax").ajaxError(function(){
alert("ajax请求发送过程中出现错误");
});
});
});
$(function(){
$("#jquery_ajax2").click(function(){
$("#ajax").load("index.html");
});
});
</script>
</head>
<body>
<input type="text" value="" id="name"/>
<input type="button" value="ajax" onclick="ajax()"/>
<input type="button" id="jquery_ajax1" value="jquery_ajax"/>
<input type="button" id="jquery_ajax2" value="jquery_ajax"/>
</body>
</html>
本文深入讲解了jQuery中的AJAX功能，包括基本概念、属性方法、请求类型、事件处理及$.ajax()方法的详细参数说明。同时提供了丰富的代码示例。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
