AjaxAndJquery.docVIP

AjaxAndJquery 一、AJAX 1.ajax(asynchronous javascript and xml) ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的特殊的对象(XMLHttpRequest对象，一般 称为ajax对象)异步(在发请求时，浏览器不会销毁当前页面，用户任然可以对当前页面做其他的操作)的向 服务器发请求。服务器送回部分数据(并不是一个完整的页面)，利用这些数据更新当前页面。整个过程， 页面无刷新，不打断用户的操作。 2.如何获得ajax对象？ 因为XMLHttpRequest没有标准化，要区分浏览器： //获取ajax对象 fuction getXMLHttpRequest(){ var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = new XMLHttpRequest(); } else { //IE浏览器 xhr = new ActiveXObject(Microsoft.XMLHttp); } return xhr; } 3.ajax对象的重要属性 1)onreadystatechange属性：用于绑定事件(readystatechange)函数，当ajax对象的readyState属性发生了变化 比如，从0变到1时，则会产生readystatechange事件。 2)responseText属性：获得服务器返回的文本 3)responseXML属性：获得服务器返回的XML文档 4)status属性：状态码 5)readyState属性：ajax对象在与服务器进行通讯时，readstate有5个值，分别是0,1,2,3,4表示ajax对象与 服务器进行通信时的状态，比如值为4时，表示ajax对象已经成功的获得了服务器返回的所有的数据，只有当 的值等于4时，才能使用responseText、responseXML属性获得服务器返回的数据。 注释：readstate:放回该对象与服务器通讯的状态，返回值是一个number类型的值，不同的值含义如下： 0,(未初始化)对象已建立，但是尚未初始化(尚未调用open方法) 1,(初始化)对象已建立，尚未调用send方法 2,(发送数据)send方法已调用 3,(数据传送中)已接受部分数据 4,(响应结束)接受了所有的数据 4.编程步骤 step1：获得ajax对象 比如： var xhr = getXhr(); step2:发请求 方式一：get请求 xhr.open(get,check_username.do?username=zs,true);//ajax与服务器之间建立连接 注意：a.get请求必须将请求参数添加到请求资源路径的后面 b.true表示异步请求，false表示同步请求。 异步请求：发送请求时浏览器不会销毁当前页面，用户可以对当前页面做其他操作。 同步请求：发送请求时浏览器不会销毁当前页面，浏览器会锁定当前页面，用户不能对 当前页面做其他操作。 xhr.onreadystatechange = f1;//绑定一个事件处理函数 xhr.send(null);//发送请求，由于在get请求中请求数据已经被绑定，所以传值null。 方式二：post请求 xhr.open(post,check_username.do,true);//ajax与服务器之间建立连接 //默认情况下，ajax对象(xhr)不会添加content-type消息头，所以调用方法添加消息头。 xhr.setRequestHeader(content-type,application/x-www-form-urlendoded); xhr.onreadystatechange = f1;//绑定一个事件处理函数 xhr.send(username+$F(username)); step3：编写服务器端的处理程序，一般服务器只需要返回部分的数据。 step4:编写事件处理函数 fu