AJAX技术

AJAX技术

  前言：AJAX并不是一门新的编程语言，而是一种新的方法；AJAX 能够在不重新加载整个页面的情况下。与服务器交换数据并更新部分网页，通过 AJAX，因特网应用程序可以变得更完善，更友好。

  说到AJAX,不得不介绍一下HTTP协议的相关内容:

    （一）HTTP协议:是由请求和响应组成的。

      请求：请求行，请求头，请求主体，其中请求行又包括 请求方式，请求URL，和协议版本

      响应：状态行，响应头，响应主体

    （二）AJAX：

      XMLHttpRequert:浏览器内建对象，用于在后台与服务器通信(交换数据)，因此我们可实现对网页的部分更新，而不是刷新整个页面

    （三）一个简单的AJAX案例：

    var xhr = new XMlHttpRequert;

    //设置请求行
    xhr.open('post','文件名');
    
    //设置请求头
    xhr.setRequertHeader('Content-Type','application/x-www/form-urlencoded');

    //设置请求主体
    xhr.send('username=aa&pass=aa');

    //接收服务器响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4&&xhr.status == 200){

            console.log('响应结束');

            //响应主体
            console.log(xhr.responseText);
            
            //通过dom操作将返回结果输出到页面上
            document.querySelector('#result').innerHTML = xhr.responseText;
        }
    }

    （四）API详解：

1，xhr.onreadystatechange=function(){
        //xhr.readyState=0,UNSENT open尚未调用
        //xhr.readyState=1,OPENED open已调用
        //xhr.readyState=2,HEADERS_RECEIVED接收到头信息
        //xhr.readyState=3,LOADING接收到响应主体
        //xhr.readyState=4,DONE响应完成
    }监听响应状态

2，xhr.status表示响应码，如200

3，xhr.open()发起请求，可以是get、post

4，xhr.setRequestHeader()设置请求头

5，xhr.send()发送请求主体get方式使用xhr.send(null)

6，xhr.statusText表示响应信息，如OK

7，xhr.getAllResponseHeaders()获取全部响应头信息

8，xhr.getResponsrHeader('key')获取指定头信息

9.xhr.responseText、xhr.responseXML都表示响应主体   

    （五）面试题：

AJAX中get和post请求方式的差异：

1，get没有请求主体，使用xhr.send(null)

2，get可以通过在请求URL上添加请求参数

3，post可以通过xhr.send('name=aa&age=10')

4，post需要设置:xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

5，get效率更好

6，get大小限制约4k，post没有限制