Ajax的原生方法

前端之家收集整理的这篇文章主要介绍了Ajax的原生方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

Ajax,是使用XMLHttpRequest对象与服务器进行通信。它可以发送和接收各种格式的信息,包括JSON,XML,HTML和文本文件。它有以下两个功能

@H_403_4@
  • 在不重新加载页面的情况下向服务器发出请求
  • 接收并处理来自服务器的数据

  • 步骤 1 创建XMLHttpRequest对象

    if (window.XMLHttpRequest) { // 新浏览器...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // 旧浏览器
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    步骤 2 为XMLHttpRequest对象分配处理函数

    方法1 分配函数

    httpRequest.onreadystatechange = nameOfTheFunction;

    方法2 分配匿名函数

    httpRequest.onreadystatechange = function () {};

    步骤 3 通过open( ),send( )作出HTTP请求

    httpRequest.open('GET','[http://www.example.org/some.file](http://www.example.org/some.file)',true);
    httpRequest.send();

    open( ) 方法

    参数1 HTTP请求的方法 GET、 POST、 HEAD 等,需大写
    参数2 发送请求的URL
    参数3 异步选项

    send( ) 方法

    如果使用POST方法,则send的参数为想要发送到服务器的任何数据


    步骤 4 处理服务器响应

    1.检查请求状态

    if (httpRequest.readyState === 4) {
        // Everything is good,the response was received.
    } else {
        // Not ready yet.
    }

    请求状态代码

    @H_403_4@
  • 0(未初始化)或(请求未初始化)
  • 1(加载)或(建立服务器连接)
  • 2(已加载)或(请求收到)
  • 3(交互式)或(处理请求)
  • 4(完成)或(请求完成,响应准备就绪)
  • 2.检查HTTP响应代码

    通过检查200OK响应代码,区分AJAX调用是否成功

    if (httpRequest.status === 200) {
        // Perfect!
    } else {
        // There was a problem with the request.
        // For example,the response may have a 404 (Not Found)
        // or 500 (Internal Server Error) response code.
    }

    3.进行数据操作

    在检查请求的状态和响应的HTTP状态代码之后,可以使用服务器发送的数据进行任何所需的操作。

    httpRequest.responseText - 以文本字符串的形式返回服务器响应httpRequest.responseXML- 作为XMLDocument可以使用JavaScript DOM函数遍历的对象返回响应

    猜你在找的Ajax相关文章