JavaScript AJAX XMLHttpRequest对象



  • XMLHttpRequest对象。

    AJAX的基石是XMLHttpRequest对象。
    所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于在幕后与Web服务器交换数据。这意味着可以更新网页的各个部分,而无需重新加载整个页面。
  • 创建XMLHttpRequest对象

    所有现代浏览器(Chrome,Firefox,IE7 +,Edge,Safari,Opera)都有内置XMLHttpRequest对象。创建XMLHttpRequest对象的语法:
    variable = new XMLHttpRequest();
    
    例子:
    var xhttp = new XMLHttpRequest();
    
  • 跨域访问

    出于安全原因,现代浏览器不允许跨域访问。这意味着网页和它尝试加载的XML文件必须位于同一服务器上。蝴蝶教程上的示例都是位于jc2182域的所有开放XML文件。如果要在自己的某个网页上使用上述示例,则加载的XML文件必须位于您自己的服务器上。
  • 较旧的浏览器(IE5和IE6)

    旧版本的Internet Explorer(5/6)使用ActiveX对象而不是XMLHttpRequest对象:
    variable = new ActiveXObject("Microsoft.XMLHTTP");
    
    要处理IE5和IE6,请检查浏览器是否支持该XMLHttpRequest对象,否则创建一个ActiveX对象:
    if (window.XMLHttpRequest) {
       // code for modern browsers
       xmlhttp = new XMLHttpRequest();
     } else {
       // code for old IE browsers
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
  • XMLHttpRequest对象方法

    方法 描述
    new XMLHttpRequest() 创建一个新的XMLHttpRequest对象
    abort() 取消当前请求
    getAllResponseHeaders() 返回标头信息
    getResponseHeader() 返回特定标头信息
    open(method, url, async, user, psw) 指定请求
    • method: 请求类型为GET或POST
    • url: 文件位置
    • async: true(异步)或false(同步)
    • user: 可选的用户名
    • psw: 可选密码
    send() 将请求发送到服务器。用于GET请求
    send(string) 将请求发送到服务器。用于POST请求
    setRequestHeader() 向要发送的标头添加标签/值对
  • XMLHttpRequest对象属性

    属性 描述
    onreadystatechange 定义readyState属性更改时要调用的函数
    readyState 保存XMLHttpRequest的状态。
    • 0: 请求未初始化
    • 1: 服务器连接建立
    • 2: 收到请求
    • 3: 处理请求
    • 4: 请求已完成并且响应已准备就绪
    responseText 以字符串形式返回响应数据
    responseXML 将响应数据作为XML数据返回
    status 返回请求的状态编号
    • 200: "OK"
    • 403: "Forbidden"
    • 404: "Not Found"
    有关完整列表,请转到Http消息参考
    statusText 返回状态文本(例如“OK”或“Not Found”)