首页 > 代码库 > AJAX基础!

AJAX基础!

异步js和xml,页面不整个刷新的情况下发送http请求和处理回应

原理

XMLHttpRequest对象,是一个js对象

在高级浏览器,直接new XMLHttpRequest创建,在老版本的IE上用ActiveX对象创建new ActiveXObject("Microsoft.XMLHTTP")

发送请求的方法

方法 
描述

open(method,url,async)

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

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

send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

方法 
描述

setRequestHeader(header,value)

向请求添加 HTTP 头。

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

像表单一样提交数据

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
getAllResponseHeaders()
DOMString getAllResponseHeaders();

Returns all the response headers as a string, or null if no response has been received. Note: For multipart requests, this returns the headers from the current part of the request, not from the original channel.

getResponseHeader()
DOMString? getResponseHeader(DOMString header);

Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn‘t exist in the response.

Async=true
需要提前设置响应函数
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
Async=false
直接放在send方法之后处理响应
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
服务器响应

属性 
描述

responseText 
获得字符串形式的响应数据。

responseXML 
获得 XML 形式的响应数据。

属性 
描述

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

readyState

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

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

status

200: "OK"

404: 未找到页面