ajax原理

Ajax

 

1. Ajax 简介

 

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

 

Ajax 的发展历史类似于其他许多一夜成名的技术。尽管 Ajax 似乎不知从何而来，但实际上，它已经存在很长一段时间了。多年的努力使其遍布 Web，在 Ajax 旗帜的带领下创建工具和模式。纵观最初网络泡沫的 DHTML 时代，以及网络公司破产后的黑暗年代，世界各地的开发人员解禁了 JavaScript 的超能力，将这个崭新的、令人激动的应用程序模式引人 Web。

 

最早最重要的 Ajax 谜题是 XMLHttpRequest (XHR) API。XHR 是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求（从后台服务器访问数据）。该 API 是大多数 Ajax 交互的核心，也是现代 Web 开发的一项基本技术。

 

真正的变化开始于几年后的 Gmail、Google Suggest 和 Google Maps 服务。这三项 Ajax 技术的使用使得 Web 开发界沸腾起来。它的响应能力和交互性对公众而言是全新的。新的 Google 应用程序很快引起了轰动。

 

 

 

2. Ajax 原理

 

以往我们浏览网页的原理是由Client向Server提交一个请求，再由Server将请求通过HTTP响应回Client。(同步请求,页面刷新)

 

使用Ajax后的工作原理如下图，可见通过Ajax在用户交互方面有了很大改进，用户可以不用为提交一个请求而长时间等待服务器请求响应，而这个请求响应则交给了一个叫Ajax引擎进行处理, 通过Ajax也可以开发出华丽的Web交互页面。(异步请求,无刷新)

 

 

 

 

3. Ajax的核心对象XMLHttpRequest

 

XMLHttpRequest是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求。该 API 是Ajax 交互的核心，也是现代 Web 开发的一项基本技术。

 

创建XMLHttpRequest对象

1. //创建异步请求对象
2.  function createRequest(){
3.      var req = null;
4.     //判断当前浏览器是否支持XMLHttpRequest对象
5.     //因为早期的IE版本(IE5)并不支持XMLHttpRequest
6.     //而是以ActiveX控件的形式来支持
7.       if(window.XMLHttpRequest){
8.            req = new XMLHttpRequest();
9.       }else{
10.               req = new ActiveXObject("Microsoft.XMLHTTP");
11.          }
12.          return req;
13. } 

 

4. 发送Ajax请求

Post请求

14. //发送post请求
15.      function doPost(){
16.      var xmlhttp = createRequest();
17.      //open方法用于打开一个请求连接,参数一表示请求类型
18.      //参数二表示请求的url,参数三(可选)是否是异步请求
19.      xmlhttp.open("POST","test",true);
20.      //Post请求必须设置请求头部
21.          xmlhttp.setRequestHeader("Content-Type",
22.                    "application/x-www-form-urlencoded");
23.      var name = document.getElementById("user").value;
24.      //send方法用于发送请求,post提交的内容作为send方法的参数
25.      xmlhttp.send("userName=" + name);
26.      // onreadystatechange是一个回调函数,当有状态发生改变时,会回调这个函数
27.          xmlhttp.onreadystatechange = function(){
28.               if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
29.                    var result = xmlhttp.responseText;
30.                    alert(result);
31.               }
32.          }
33.  }

 

Get请求

34. //发送get请求
35.      function doGet(){
36.          var xmlhttp = createRequest();
37.      var name = document.getElementById("user").value;
38.      //open方法用于打开一个请求连接,参数一表示请求类型
39.      //参数二表示请求的url,参数三(可选)是否是异步请求
40.      xmlhttp.open("get","test?userName="+name,true);
41.     //send方法用于发送请求,post提交的内容作为send方法的参数
42.      xmlhttp.send();
43.     // onreadystatechange是一个回调函数,当有状态发生改变时,会回调这个函数
44.          xmlhttp.onreadystatechange = function(){
45.          if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
46.                    var result = xmlhttp.responseText;
47.                    alert(result);
48.               }
49.          }
50.  }

 

状态说明:

readyState表示当前请求状态

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送

2：请求已发送，正在处理中

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

 

 

status表示HTTP响应状态

200 OK，，

404 Not Found，

500 Internal Server Error，

 

代码中认定readyState==4和status==200为正常状态。