首页 > 代码库 > Ajax相关

Ajax相关

2024-07-10 09:13:22   221人阅读

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

 

 


联系
我们