Ajax笔记
|
浏览器在后台通过发送get/post等请求，到服务器进行少量的数据交换后，返回服务器片后的数据（json); 在需要更新的节点下进行更新显示内容。 （也就是说在不重新加载整个网页的情况下，网页中的部分内容进行更新。） 1、XMLHttpRequest对象 所有的现代浏览器均支持XMLHttpRequest，（IE5/IE6:ActiveXObject); <span style="color:#000000;">var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}</span>
2、XMLHttpRequest的方法 xmlhttp.open(method,url,async); method:请求的类型;get/post url:文件在服务器上的位置 async:true(异步），false（同步） xmlhttp.send(string); string:仅用于post请求 xmlhttp.open("GET","test.html?time="+Math.random()+"&name=zhangsan",true);
xmlhttp.send();
xmlhttp.open("POST","test.html",true);
xmlhttp.setRequestHeader("Content-type","text/json;charset=UTF-8");
xmlhttp.send("name=zhangshan&password=123456");
xmlhttp.setRequestHeader(header,value); header:规定头的名称 value:规定头的值 async = true; xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",true);
xmlhttp.send();
3.XMLHttpRequest对象的responseText或responseXML属性 responseText:获得字符串形式的响应数据 responseXML:获得XML形式的响应数据 var xmltest = xmlhttp.responseXML;
var texts = "";
var xmltext = xmltest.getElementsByTagName("ARTIST");
for (var i = 0;i<xmltext.length;i++) {
texts += xmltext[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("divid").innerHTML = texts;
4.onreadystatechange事件 当readyState改变时，就会触发onreadystatechange事件。 readyState属性存有XMLHttpRequest对象 的状态信息。 XMLHttpRequest对象的三个重要的属性： xmlhttp.readyState: 0:请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 xmlhttp.status: 200:"ok" 404:未找到页面 5.jQueryAJAX 由于不同的浏览器对AJAX的实现并不相同，须编写额外的代码对浏览器测试 jQuery解决了这个问题 jQuery load()方法 从服务器加载数据，并把返回的数据放入被选元素中 $(selector).load(url,data,callback); data:与请求一同发送的查询字符串键、值对集合 callback :是load()方法完成后所执行的函数名称。 callback参数： responseTxt:包含调用成功时的结果内容 statusTXT：调用 的状态 xhr:包含XMLHttpRequest对象 test.txt文件： <h3>jQuery and Ajax</h3> <p id="pid">helloworld!</p> 把“test.txt"中的id="pid"的元素的内容，加载到指定 的<div>元素中 $("button").click(function() {
$("#divid").load("test.txt #pid",function(responseTxt,statusTxt,xhr) {
if(statusTxt == "success")
alert("加载成功");
if(statusTxt == "error")
alert("error: " + xhr.status + ": " + xhr.statusText);
});
});
jQuery get() $("button").click(function() {
$.get("test.txt",function(data,status) {
alert("data:"+data + "nstatus:" +status);
});
});
Jquery post() $("button").click(function() {
$.post("test.txt",{
name:"zhangsan”，
password:"123456"
},status) {
alert("data:" +data + "nstatus:" + status);
});
});
6、jQuery ajax([settings]) settings:通过$.ajaxSetup()设置任何选项的默认值 参数： options: 类型，Object,所有选项都是可选的 async: 类型，Boolean,异步,true beforeSend(XHR): 类型，Function,XHR唯一参数 cache: 类型，Boolean(缓存页面) 默认值，true,dataType为script和jsonp时默认false complete(XHR,TS): 类型，Function 参数，XMLHttpRequest对象 请求成功或失败后均调用 contentType: 类型：String 默认值：“application/x-www-form-urlencoded" 发送信息至服务器时内容编码类型 context: 类型;Object 回调函数上下文 data: 类型：String 发送到服务器的数据，将自动转换为请求字符串格式 dataFilter: 类型：Function 给ajax返回的原始数据进行处理的函数 参数，data是ajax返回的原始数据，type是调用jQuery.ajax时提供的datatype参数 dataTye: 类型：String 预期服务器返回的数据类型 "xml",可用jQuery处理 ”html"，返回纯文本html信息 “script",返回纯文本javascript代码 "json",返回json数据 "jsonp",返回jsonp格式，”url?callback=?",jQuery将自动替换？为正确的函数名，以执行回调函数 "text",返回纯文本字符串 error: 类型，Function 自动判断（xml ，html),请求失败调用此函数 参数,XMLHttpRequest对象、错误信息、（可选）捕获的异常对象 错误信息，null,"timeout","error","notmodified"，"parsererror" global: 类型，Boolean 是否触发全局ajax事件,true ifModified: 类型,Boolean 仅在服务器数据改变时获取新数据，false jsonp: 类型，String 在一个jsonp请求中重写回调函数的名字，替代“callback=?" {jsonp:'onJsonPLoad'},会将"onJsonPLoad=?"传给服务器 jsonpCallback: 类型，String 为jsonp请求指定一个回调函数名 password: 类型，String 用于响应http访问请求的密码 processData: 类型，Boolean 默认，true,如果是对象，都会处理转化成一个查询字符串，以配合默认内容类型“application/x-www-form-urlencoded" scriptCharset: 类型，String 通常只在本地和远程内容编码不同时使用 success: 类型，Function 请求成功的回调函数 参数，服务器返回，根据dataType参数进行处理后的数据 traditional: 类型,Boolean 如果想要用传统的方式来序列化数据，true timeout: 类型,Numver 设置请求超时时间（毫秒)。 type: 类型,String 请求方式 ，默认”GET" url: 类型，String 默认，当前页地址，发送请求的地址 username: 类型，String 用于响应HTTP访问认证请求的用户名 xhr: 类型：Function 需要返回一个XMLHttpRequest对象 示例：
function lzhajax(url,type,callback) {
$.ajax({
url:url,data:data,type:type,beforeSend:function(xhr) {
xhr.setRequestHeader("sessionid",ssid);
},success:function(result,textStatus,jqXHR) {
ssid = jqXHR.getResponseHeader("sessionid");
setCookie('ssid',ssid,1);
if(callback) {
callback(result);
}
}
});
});
??
??
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |