AJAX学习整理一

发布时间：2020-12-16 00:31:42 所属栏目：百科来源：网络整理

导读：从一进入这个IT行业的时候就经常听人们提及Ajax技术，当时一直由于其它原因没能学过。但是后来在学习基于jquery封装的Easyui框架时，里面有提及到ajax的方法，当时就直接用了也没往太深处想，现在有机会了，我要好好探一探究竟。以下内容是我从网上搜索后整

从一进入这个IT行业的时候就经常听人们提及Ajax技术，当时一直由于其它原因没能学过。但是后来在学习基于jquery封装的Easyui框架时，里面有提及到ajax的方法，当时就直接用了也没往太深处想，现在有机会了，我要好好探一探究竟。以下内容是我从网上搜索后整理的，菜鸟见解，如有不对之处还望各路大神指正，先谢之。

1.AJAX 是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML，别问我什么是异步，自己百度去）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

在不使用ajax的网页中，如果想更新数据的话，会重新加载这个页面，当然使用后就不一样了。

2.AJAX的核心处理技术

XMLHttpRequest 对象

核心处理对象XMLHttpRequest是一个浏览器内置的组件，最早出现在IE4里面。所有现代浏览器均支持 XMLHttpRequest 对象，只不过IE5和IE6使用的组件叫做 ActiveXObject。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法：

variable=newXMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=newActiveXObject("Microsoft.XMLHTTP");

我在网上看到别人博客里面有另一种写法（不知道区别在哪儿，先记录上+_+）：

IE5之前varxmlreq=ActionXObject("Microsoft.XMLHTTP");
IE5之后varxmlreq=ActionXObject("Msxml2.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

varxmlhttp;
if(window.XMLHttpRequest)
{//codeforIE7+,Firefox,Chrome,Opera,Safari
xmlhttp=newXMLHttpRequest();
}
else
{//codeforIE6,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}

3.常用方法及属性

是一个浏览器内置的组件，最早出现在IE4里面。所有现代浏览器均支持 XMLHttpRequest 对象，只不过IE5和IE6使用的组件叫做 ActiveXObject。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

常用方法：

xmlreq.abort():取消当前的HTTP请求
xmlreq.open():初始化一个HTTP请求，指定请求的方法（Get/Post）、URL、身份验证信息（不太理解这个身份验证）等。
xmlreq.setRequestHeader()：设置HTTP请求的头信息
xmlreq.getResponseHeader():获取响应内容的HTTP头信息
xmlreq.send(date):发送一个HTTP请求道服务器

常用属性：

xmlreq.onreadystatechange;指定当发生就绪状态变更事件时的处理者，通常是JavaScript函数，xmlreq.onreadystatechange=function xx(){//回调函数}
xmlreq.readyState XMLHttpRequest对象专有的异步响应的状态
0 表示初始化，即XMLHttpRequest对象未创建open()方法未调用
1 表示XMLHttpRequest对象被创建，但请求未发出send()为调用
2表示HTTP请求已经发出正在处理中，这时可以取得HTTP头信息，但是HTTP响应内容不可用
3 表示HTTP响应内容部分数据可用，但响应还没有完成
4 表示服务器响应完成，可以从属性responseBody、responseText、responseXML中获得完整响应内容
xmlreq.status 200(按照HTTP协议规定的状态值)
xmlreq.readyState = 4 与xml.status=200的区别：
举个例子来讲：从服务器A发送一仓库瓷器，到浏览器B，中间可能会有很多车来进行运输，而且各个车走的路线也不同。如何去验证收到的货物数量正确并且没有货物破损?
xmlreq.readyState = 4 验证返回的货物数量是否OK
xmlreq.status = 200 验证返回的货物的完整性是否OK
响应主体的responseBody：以无符号字节数数组描述响应内容正文
响应流responseStream：以IStream(二进制数据流)形式描述响应内容正文
响应文本的responseText：响应内容正文的纯文本形式
响应XMl responseXMl：以XML Dom 描述响应内容正文，（常用）

4.AJAX的开发步骤

(1) 创建XMLHttpRequest对象

创建时要判断一下当前浏览器是否支持XMLHttpRequest对象

varxmlhttp;
if(window.XMLHttpRequest)
{//codeforIE7+,IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}

(2) 创建完对象后，使用xmlhttp.open(method,urlasync)方法指定要连接的服务器代码和请求提交方法

xmlhttp.open("GET","test1.txt"+Math.random(),true);//为了避免得到缓存结果，加上一个唯一id（GET）

(3) 指定服务器完成后，处理服务器响应内容---回调函数

xmlhttp.onreadystatechange=function()//回调函数
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)//当调用成功时，所做的时间处理
{
document.getElementById("XXX").innerHTML=xmlhttp.responseText;//把返回的文本内容赋给页面元素
}
}

(4) 使用xmlhttp.send()提交请求

xmlhttp.send();

5.AJAX的方法详解

(1).xmlhttp.open(method,url,async);

描述：

method：请求的类型：GET或POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",249);">如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

setRequestHeader(headervalue)：header：规定头的名称；value：规定头的值

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
如果不加上这句话在post方式提交时会导致服务器端获取AJAXPOST数据失败。

url：文件在服务器上的位置

async：true(异步)或false(同步)

一般情况下不建议使用同步，但是在一些小型数据请求中也可以使用。

当使用 async=true 时，响应处于 onreadystatechange 事件中的就绪状态时的函数。

AJAX执行时：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

(2)onreadystatechange 事件(POST方式请求时，一般GET方式就直接把成功后执行的程序放在send方法后面即可)

触发条件：每当 readyState 改变时，就会触发 onreadystatechange 事件。

好吧，这篇先整理到这儿，感谢w3school网站学习资料，也感谢别人的学习资料：http://blog.163.com/magicc_love/blog/static/18585366220129841216712/，

下一篇详细整理一下ajax的应用实例。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!