Ajax技术详解-CSDN博客

本文链接：https://blog.csdn.net/Programer0/article/details/104515810

1.Ajax简介

Ajax (Asynchronous JavaScript and XML 阿贾克斯)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax之父Jesse James Garrett于2005年提出这一新概念由于Google公司在Google地图、Google建议、Gmail等产品中对Ajax的成功运用，使得web浏览器的潜力被大大挖掘了出来，从而Ajax越来越受到关注并流行起来。

Ajax的关键技术：使用CSS构建用户界面样式，负责页面排版和美工

使用DOM进行动态显示和交互，对页面进行局部修改

使用XMLHttpRequest异步获取数据

使用JavaScript将所有元素绑定在一起

Ajax的最大特点：异步访问，局部刷新

2.Ajax方案与传统方案比较

传统方案：提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的使用整个注册页面。

缺点：较大的网络流量，用户体验不好。

方案2：使用Ajax方案。用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；

优点：较小的网络流量，用户体验好。

3.Ajax执行流程

第一步：创建XMLHttpRequest对象

不同浏览器创建方式不同

可以提取为方法供调用

function createXMLHttpRequest(){
if(window.ActiveXObject){//IE
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{ //其他浏览器
	xhr =  new XMLHttpRequest();
}
}

第二步：建立到服务器的连接

xmlHttp.open("GET",“exmp1.jsp",true);

xmlHttp.open(“POST,“exmp1.jsp");

xmlHttp.open("GET", "examp1.jsp?"+new Date().getTime(),true);

使用 XMLHttpRequest 对象的 open() 方法来建立请求。参数如下：

request-type：发送请求的类型。典型的值是 GET 或 POST。

url：要连接的 URL asynch：如果希望使用异步连接则为 true，否则为 false。默认为 true。

username：如果需要身份验证，则可以在此指定用户名。

password：如果需要身份验证，则可以在此指定口令。

通常使用其中的前三个参数或前两个参数即可。

第三步：指定回调函数 Ajax响应回来后自动调用函数

不同的Ajax请求基本步骤相同，差别和难易主要在回调函数

function process(){
if(xhr.readyState == 4){//200  404  500
if(xhr.status == 200){
//得到返回的结果
var result = xhr.responseText;
//写到指定位置
document.getElementById("namemsg").innerHTML=result;
}else{
          alert("Ajax请求错误");
}
}
}

HTTP就绪状态，表示请求的状态或情形。在Ajax应用程序中需要了解五种就绪状态,但通常只使用状态4：

0：请求没有发出（在调用 open() 之前）

1：请求已经建立但还没有发出（调用 send() 之前）

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应

4：响应已完成，可以访问服务器响应并使用它

状态码status

200

404

返回结果数据

responseText

responseXML