• ajax通信


    AJAX即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),可以在不重新加载整个网页的基础上,对网页的某部分进行更新。

    XMLHttpRequest 是 AJAX 的基础,用于在后台与服务器交换数据。

    想要创建一个AJAX请求,分为以下几个步骤:

    创建XMLHttpRequest对象-> open -> send ->处理响应

    //创建Ajax对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    //向服务器发送请求
    xhr.open('GET', 'xxx.php', true); //async:true(异步)或 false(同步)
    xhr.send();
    /*post请求要先设置header再发送*/
    xhr.open("POST", "ajax_test.asp", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("fname=Bill&lname=Gates");
    //服务器响应
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {//readyState==4表示后台处理完成了
            if (xhr.status == 200 || (xhr.status == 304)) {//状态码为0是本地响应成果,200表示处理的结果是ok的
                //判断异步调用是否成功,如果成功开始局部更新数据
                var res = xhr.responseText;
            } else {
                alert("出错状态码:" + xhr.status + "出错信息:" + xhr.statusText);
            }
        }
    
    }
    
    /*用promise实现的ajax*/
    var getJSON = function (url) {
        var promise=new Promise(function (resolve,reject) {
            var xhr = window .XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('GET',url);
            xhr.onreadystatechange =handler;
            xhr.responseType = "json";
            xhr.setRequestHeader("Accept","application/json");
            xhr.send();
            function handler() {
                //readyState
                // 0 = 未初始化。尚未调用open()方法
                // 1 = 启动 已经调用open()方法,但尚未调用send()方法
                // 2 = 已加载/发送,已经调用send()方法,但尚未接收到响应
                // 3 = 交互中/接收,已经接收到部分响应数据
                // 4 = 完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
                if(this.readyState !== 4){
                    return;
                }
                if(this.status === 200 || this.status===304){
                    resolve(this.response);
                }
                else {
                    reject(new Error(this.statusText));
                }
            }
        });
        return promise;
    };
    getJSON('./test.json').then(function (data) {
        console.log(JSON.stringify(data));
    },function (error) {
        console.log('出错了'+error);
    });
    

      

    XMLHttpRequest对象方法:
    方    法 描    述
    abort() 停止当前请求 
    getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
    getResponseHeader("header") 返回指定首部的串值
    open("method","URL",[asyncFlag],["userName"],["password"]) 
    建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码
    open方法并不会真正发送请求,只是会启动一个请求以备发送
    send(content) 向服务器发送请求
    setRequestHeader("header", "value")
    把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )
    必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

    XMLHttpRequest 对象属性描述

      属  性 描    述
    onreadystatechange 状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
    readyState
    请求的状态。有5个可取值:
    0 = 未初始化。尚未调用open()方法
    1 = 启动 已经调用open()方法,但尚未调用send()方法
    2 = 已加载/发送,已经调用send()方法,但尚未接收到响应
    3 = 交互中/接收,已经接收到部分响应数据
    4 = 完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
    responseText 服务器的响应,返回数据的文本。
    responseXML 服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。
    responseBody  服务器返回的主题(非文本格式)
    responseStream 服务器返回的数据流
    status 服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)
    statusText 服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)

    参考资料 http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

  • 相关阅读:
    红黑树——面试相关
    汇编常用指令
    c++11 delete禁用函数
    【转】C++可变参数列表处理宏va_list、va_start、va_end的使用
    【转】C/C++函数调用过程分析
    引用的大小
    多线程面试
    2017.08.22网易面试问题记录
    c++ 重载->
    探究Java如何实现原子操作(atomic operation)
  • 原文地址:https://www.cnblogs.com/jingmi-coding/p/9277783.html
Copyright © 2020-2023  润新知