首页 > 代码库 > Ajax相关

Ajax相关

1.首先创建Ajax请求对象,即XMLHttpRequest对象,大多数浏览器都内建了该对象,当然大多数一般和IE6关系不大,所以针对这一点,再获得该对象时,需要做一些处理:

1 var xmlhttp;2 if (window.XMLHttpRequest)3   {// code for IE7+, Firefox, Chrome, Opera, Safari4   xmlhttp=new XMLHttpRequest();5   }6 else7   {// code for IE6, IE58   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");9   }

2.发送请求需要用到的方法。

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

 

 

 

 

 

 

 

 

 

open->method:可选参数为“GET”和“POST”

    GET:请求简单,快速。但不能发送较大的数据。

       携带数据时,与平时的其它的get请求格式一致。

    POST:1.不希望使用缓存数据时建议使用

         2.发送较大的数据时建议使用

         3.安全性较get方法好

                4.post数据可为空,若有数据,则在将数据以字符串形式传入send()方法,格式为"名1=值1&名2=值2”"。

open->async:可选参数为"true"和“false”

 

 var xmlhttp;            if (window.XMLHttpRequest)            {// code for IE7+, Firefox, Chrome, Opera, Safari                xmlhttp=new XMLHttpRequest();            }            else            {// code for IE6, IE5                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }            xmlhttp.onreadystatechange=function()            {                if (xmlhttp.readyState==4 && xmlhttp.status==200)                {                    document.getElementById("txt").innerHTML=xmlhttp.responseText;                }            }            xmlhttp.open("GET","text.txt",false);            xmlhttp.send();             alert("ok");

   

 

 

     以上示例代码中,当open->async设置为false时,弹窗消息“ok”一般都会在响应文本显示之前,当其设置为true后,弹窗消息一定会在响应文本显示之后,

也就是说,设置为true后会阻塞javascript的脚本继续往下执行,需要等到请求响应完成,才继续往下执行,而设置为false,javascript会在等待服务器响应数据

的同时,继续执行代码。

 

3.需要添加响应头,需要用到以下方法:

方法描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

 

 

 

 

 

 

4.服务器响应属性:

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。

 

 

 

 

 

5.当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

 

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化,未初始化,尚未调用open()方法。
  • 1: 服务器连接已建立,启动,尚未调用send()方法。
  • 2: 请求已接收,已发送,但未收到。
  • 3: 请求处理中,接收数据,已收到部分数据。  
  • 4: 请求已完成,且响应已就绪,收到全部响应数据。
status

200: "OK"

404: 未找到页面

304:浏览器缓存数据,数据并未修改

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

参考:http://www.w3school.com.cn/ajax/index.asp