Ajax
一、Ajax(Asynchronous JavaScript and XML(异步的 JavaScript 和 XML))简介
1、什么是 AJAX ? Ajax不是某种编程语言,AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
例如在传统的网页中,即不使用 AJAX的网页中,如果需要更新内容,那么必需重欣加载整个网页。但在使用了 AJAX的网页中,只需要更新我们想要更新的部分网页。
2、同步与异步:
(1)同步是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。
(2)异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
(3)我们要注意的是同步只执行当前进程,不执行下面的进程;直到当前进程执行完毕才会执行下一个进程;但当当前进程出现问题时,它会一直等待下去。而异步是所有进程同时执行,即使上一个进程出现问题,它也会继续执行下面的进程,而不会一直等待下去。
(4)异步的实现方式:
(a)运用HTML与CSS来实现页面,表达信息;
(b)运用XMLHttpRequest和web服务器进行数据的异步交换;
(c)运用JavaScript操作DOM,实现动态局部刷新。
3、AJAX中的创建 XMLHttpRequest 对象:
(1)什么是 XMLHttpRequest 对象? XMLHttpRequest 对象用于在后台与服务器交换数据(具体介绍可见w3c)。
(2)所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)都内部创建了XMLHttpRequest 对象。我们只需要引用就可以了。
(3)创建 XMLHttpRequest 对象的语法是: var xhr=new XMLHttpRequest();而在老版本的 Internet Explorer(IE5 和 IE6)中使用的是ActiveXObject 对象:var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
(4)为了应对所有的现代浏览器,包括 IE5 和 IE6,我们需要检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject 对象。其代码如下:
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
4、 在AJAX中向服务器发送请求,我们使用的方法是 XMLHttpRequest 对象的 open()方法 和 send() 方法:
(1)open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。其中:
参数method表示的是请求的类型;
参数url表示文件在服务器上的位置(路径);
参数async表示true(异步)或 false(同步)。
(2)send(string)是将请求发送到服务器。参数string仅用于 POST 请求。
(3)使用GET请求或 POST请求:
(a)一个简单的 GET 请求:
xhr.open(“GET”,”/jQueryAjax/getPersonInfor”,true);
xhr.send();
(b)一个简单 POST 请求:
xhr.open(“POST”,”/jQueryAjax/getPersonInfor”,true);
xhr.send();
(4)如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 方法来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。例如:
xhr.open(“POST”,”/jQueryAjax/postPersonInfor”,true);
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xhr.send(data);//data表示表单中需要提交的数据(字符串)
(5)setRequestHeader方法的语法是setRequestHeader(header,value);它的作用是向请求添加 HTTP 的头部。参数header的作用是规定头的名称;参数value的作用是规定头的值。
5、在AJAX中是使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性去获取来自服务器的响应。
(1)属性responseText是获得字符串形式的响应数据。
(2)属性responseXML是获得 XML 形式的响应数据。
(3)用法:document.getElementById(“div”).innerHTML=xhr.responseText;
6、AJAX中的onreadystatechange 事件:每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
(1)下面是 XMLHttpRequest 对象的三个重要的属性:
(a)onreadystatechange表示存储函数或函数名,每当 readyState 属性改变时,就会调用该函数。
(b)readyState是存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。其中:
0表示的是请求未初始化;
1表示的是服务器连接已建立;
2表示的是请求已接收;
3表示的是请求处理中;
4表示的是请求已完成,且响应已就绪。
(c)status是返回值;当返回的是200时表示“OK”,而当返回的是404时表示未找到页面。
(2)在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时,表示响应已就绪。其代码如下:
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
二、用jQuery实现Ajax(jQuery.ajax()方法、jQuery.get()方法、jQuery.post()方法)
1、用jQuery实现Ajax的方法是jQuery.ajax({settings});
(1)type表示类型,”POST”或”GET”,默认值为”GET”;
(2)url表示发送请求的地址;
(3)async表示设置同步与异步,(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
(4)data是一个对象,连同请求发送到服务器的数据;
(5)dataType表示预期服务器返回的数据类型,如果不指定,jQuery将自动根据http包MIME信息来智能判断,一般我们采用json格式,可以设置为”json”;
(6)success是一个方法,请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串;
(7)error是一个方法,请求失败是调用此函数,传入XMLHttpRequest对象。
2、jQuery.get()方法是以GET方式从服务器获取数据的方法;即通过远程 HTTP GET 请求载入信息。
(1)它的语法是jQuery.get(url, [data], [callback], [type]);其中:
(a)参数url表示的是待载入页面的URL地址;
(b)参数data表示的是待发送 Key/value 参数;
(c)参数callback表示的是载入成功时回调函数;
(d)参数type表示的是返回内容格式,xml, html, script, json, text, _default。
(2)这是一个简单的 GET 请求功能以取代复杂的 $ .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $ .ajax。
3、jQuery.post()方法是以POST方式从服务器发送数据的方法;即通过远程 HTTP POST 请求载入信息。
(1)它的表达式是jQuery.post(url, [data], [callback], [type]);其中:
(a)参数url表示的是发送请求地址;
(b)参数data表示的是待发送 Key/value 参数;
(c)参数callback表示的是发送成功时回调函数;
(d)参数type表示的是返回内容格式;如xml, html, script, json, text, _default。
(2)这是一个简单的 POST 请求功能以取代复杂 $ .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $ .ajax。