AJAX的使用

一、AJAX的介绍

1.什么是AJAX

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

2.AJAX的特点

AJAX是异步的JavaScript和XML；
AJAX是一种用于创建更好更快以及交互性更强的WEB应用程序的技术；
AJAX是一种独立于Web服务器软件的浏览器技术；
AJAX不是一种新的编程语言，而是一种技术；
AJAX使用JavaScript在Web浏览器与web服务器之间来发送和接受数据（前端后端交互）；
AJAX在浏览器与WEB服务器之间使用一部数据传输（HTTP请求）。

二、AJAX的使用

1、使用AJAX的五个步骤

创建XMLHttpRequest对象
使用open方法设置和服务器的交互信息
设置requestHeader()
设置发送的数据，开始和服务器交互send()
取消响应，注册事件

1）.创建XMLHttpRequest对象实例

const xhr = new XMLHttpRequest();

2）.配置请求方式，设置请求接口地址，使用open方法设置和服务器的交

互信息

open('请求方式'，"url地址")
请求方式取值：GET/POST （这两者较常用）

xhr.open('get', 'http://127.0.0.1/posts')

3）.设置requestHeader() — 使用post请求方式才设置

request.setRequestHeader(属性名称, 属性值);

发送json格式数据

xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

xhr.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

xhr.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4）.设置发送的数据，开始和服务器端交互

xhr.send();

5）.取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：响应的 HTTP 状态描述。
readyState：返回HTTP请求状态
0 open()尚未调用 UNSENT
1 open()已调用 OPENED
2 接收到头信息 HEADERS_RECEIVED
3 接收到响应主体 LOADING
4 响应完成 DONE
readystatechange 请求状态改变事件
当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

2.例子1

<body>
    <button>点击请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        var btn = document.querySelector('button');
        var result = document.getElementById('result');
        //绑定事件
        btn.addEventListener('click',function(){
            //创建对象
            const xhr = new XMLHttpRequest();
            //初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            //发送
            xhr.send();
            //时间绑定 处理服务端返回的结果
            // on 表示当······时候
            //readystate 是 xhr 对象中的属性， 表示状态 0 1 2 3 4 
            xhr.onreadystatechange = function(){
                //判断响应状态码 200 404 403 401 500
                if(xhr.readyState === 4){
                      //2xx 200多就表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 行 头 空行 体
                        //响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        // console.log(1);
                        result.innerHTML = xhr.response;
                    }else{
                    }
                }
            }
        })
        // result.addEventListener('mouseenter',function(){
        //     console.log('You');
        // })
    </script>
</body>

2.例子2

<body>
  <button onclick="toLogin()">登录</button>
  <script>
    // http://121.4.83.32:7004/user/login
    function toLogin() {
      var request = new XMLHttpRequest()
      request.open('post', 'http://121.4.83.32:7004/user/login')
      // 配置参数
      var params = {
        username: 'admin1',
        password: '123321'
      }
      // 设置请求头
      request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
      // JSON.stringify — js对象转为json对象
      request.send(JSON.stringify(params))
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }
  </script>
</body>