AJAX学习整理一

前端之家收集整理的这篇文章主要介绍了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 对象。

常用方法

  1. xmlreq.abort():取消当前的HTTP请求

  2. xmlreq.open():初始化一个HTTP请求,指定请求的方法(Get/Post)、URL、身份验证信息(不太理解这个身份验证)等。

  3. xmlreq.setRequestHeader():设置HTTP请求的头信息

  4. xmlreq.getResponseHeader():获取响应内容的HTTP头信息

  5. xmlreq.send(date):发送一个HTTP请求道服务器

常用属性

  1. xmlreq.onreadystatechange;指定当发生就绪状态变更事件时的处理者,通常是JavaScript函数,xmlreq.onreadystatechange=function xx(){//回调函数}

  2. xmlreq.readyState XMLHttpRequest对象专有的异步响应的状态

    0 表示初始化,即XMLHttpRequest对象未创建open()方法调用

    1 表示XMLHttpRequest对象被创建,但请求未发出send()为调用

    2表示HTTP请求已经发出正在处理中,这时可以取得HTTP头信息,但是HTTP响应内容不可用

    3 表示HTTP响应内容部分数据可用,但响应还没有完成

    4 表示服务器响应完成,可以从属性responseBody、responseText、responseXML中获得完整响应内容

  3. xmlreq.status 200(按照HTTP协议规定的状态值)

    xmlreq.readyState = 4 与xml.status=200的区别:

    举个例子来讲:从服务器A发送一仓库瓷器,到浏览器B,中间可能会有很多车来进行运输,而且各个车走的路线也不同。如何去验证收到的货物数量正确并且没有货物破损?

    xmlreq.readyState = 4 验证返回的货物数量是否OK

    xmlreq.status = 200 验证返回的货物的完整性是否OK


  4. 响应主体的responseBody:以无符号字节数数组描述响应内容正文

  5. 响应流responseStream:以IStream(二进制数据流)形式描述响应内容正文

  6. 响应文本的responseText:响应内容正文的纯文本形式

  7. 响应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的应用实例。

猜你在找的Ajax相关文章