一，原生JS实现ajax:
|
1
2
3
4
5
6
7
8
9
10
11
|
function AjaxGet() { var xhrObj; if(window.ActiveXObject) //ie5,6是以ActiveX方式声明的。 { xhrObj = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xhrObj = new XMLHttpRequest(); } |
//下面这段代码需要注意，有可能会报Origin null is not allowed by Access-Control-Allow-Origin. 这个错误，原因是跨域问题，解决方法：
//将该页面也放到网站目录下，同时请求的url要和访问网站的url中的主机地址一致，比如访问网站用localhost，那请求的url也要用localhost而不能用ip，
//因为主机地址不一样，浏览器就认为你跨域请求了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
xhrObj.open("GET","http://localhost:9000/PHP/demo1-javascript/test.php",true); //第三个参数表示是否以异步方式发送请求，true表示以异步方式发送请求 xhrObj.onreadystatechange=reqCallback; xhrObj.send(null); //采用GET方式提交，所有参数可以为null function reqCallback() { if(xhrObj.readyState == 4) // 4表示请求完成加载 { if(xhrObj.status==200) // http状态值为200 { $("#divRes").text(xhrObj.responseText); } } } } $(function(){ $("#btnForm").click(function(){ AjaxGet(); }); }); |
二，jquery中的ajax方法：
1，load方法：load(url [, data] [, callback]) ，第二个参数为发送到服务器的key/value值。
1）简单加载
|
1
2
3
4
5
6
7
8
9
|
function LoadInfo() { $("#divRes").load(http://localhost:9000/PHP/zydemo/toload.html); //加载到主页面后，主页面的样式会应用到加载的内容上。 } $(function(){ $("#btnForm").click(function(){ LoadInfo(); }); }); |
2）筛选载入的html文档：
|
1
2
3
4
|
function LoadInfo() { $("#divRes").load(http://localhost:9000/PHP/zydemo/toload.html .more); //仅加载class为 more的元素，注意url和 .more之间有一个空格。 } |
3) 详细的load用法：
|
1
2
3
4
5
6
|
$("#divRes").load("toload.html", {id:10, name:"zy"}, function(responseText, textStatus, xhrObj){//responseText: 请求返回的内容//textStatus: 请求状态：success, error, notmodified, timeout 4种。//xhrObj: XMLHttpRequest对象。//注意，如果第二个参数不为空，则发起的是POST请求，否则是GET请求。}); |
2，get 和 post方法：
1） get方法：发送请求时对传输的数据大小有限制，一般不能大于2KB，另外GET方式请求的数据会被浏览器缓存，二POST方式不会。
$.get(url [,data] [,callback], [,type] );
//data: 发送的key/value会作为QueryString附加到请求的url中。
//type: 期待服务端返回内容的格式：xml, html, script, json, text, default
2）post方法，使用方式同get
3, getScript 和getJSON 方法：
1） $.getScript("test.js", callback); //直接加载JS文件
2）
|
1
2
3
4
5
6
7
|
$.getJSON("test.json", function(jsonData){ $.each(jsonData, function(idx, val){ //注意$.each()的用法：第一个参数为数组或对象。 //第二个参数为一个回调函数，回调函数第一个参数为对象的成员或数组的索引，第二个参数为对应成员值或数组元素值。 //要退出each循环，return false即可。 } );}) |
4，ajax方法：
最低层，功能最强，用法最灵活的方法。
$.ajax(options)
先上一个简单示例：
|
1
2
3
4
5
6
7
8
|
$.ajax({ type:"GET", url:"info.aspx?id=40&idx=2&callback=?", dataType:"jsonp", success:function(data){ }}); |
$.ajax所有参数详细说明：
timeout: 请求超时时间，单位为毫秒。
data: 发送过去的参数，可以为对象或字符串。
dataType: 预期服务器返回的数据类型：xml, html,
script(返回纯文本js代码，除非设置了cache参数，否则不会自动缓存结果)，发起不在同一个域下的远程请求时，所有POST请求都将转换为GET请求。
json, jsonp, text(返回纯文本字符串)。
beforeSend: 例子：
beforeSend:function(xhrObj){
//发送请求前可以修改XMLHttpRequest对象xhrObj，
//如果在该函数中返回false，则会取消本次ajax请求。
}
complete：例子：
complete:function(xhrObj, textStatus){
//请求完成后调用的回调函数，请求成功或失败时均调用。
}
success：例子：
success:function(data, textStatus){
//data: 由服务器返回，并根据dataType参数进行处理后的数据。
}
error： 例子：
error: function(xhrObj, textStatus, errorThrown){
// textStatus: 错误信息
// errorThrown: 错误对象，一般textStatus和errorThrown只有其中一个包含信息。
global: 默认为true，表示是否触发全局ajax事件。
5，序列化问题：
$.get("getInfo.aspx", $("#form1").serialize(), function(data, textStatus){
//serialize会将表单数据值序列化为字符串后提交到服务端。
//另外 serializeArray()返回json格式的数据。
} );
$.param函数：将一个数组或对象按照key/value进行序列化。
var obj = {id:1, name:"zy", age:22};
var pms = $.param(obj);
alert(pms); //输出id=1&name=zy&age=22
6，ajax全局事件：
$.ajaxStart(callback); // ajax请求开始时触发。
$.ajaxStop(callback); // ajax请求结束时触发。
$.ajaxComplete: ajax请求完成时触发。
$.ajaxError: ajax请求发生错误时触发。
$.ajaxSend: ajax发送前触发。
$.ajaxSuccess: ajax请求成功时执行的函数。
这几天码字真辛苦！