AJAX详情介绍及使用

一、什么是AJAX:

• ajax 全名 async javascript and XML(异步JavaScript和XML)
• 是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
• 是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

二、什么是同步请求？(false):

• 同步请求是指当前发出请求后，浏览器什么都不能做，
• 必须得等到请求完成返回数据之后，才会执行后续的代码，
• 相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
• 也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
• 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

三、什么是异步请求？(默认:true)：

• 默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
• Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
• 一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
• 无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

四、AJAX 的优势：

• 不需要插件的⽀持，原⽣ js 就可以使⽤
• ⽤户体验好（不需要刷新⻚⾯就可以更新数据）
• 减轻服务端和带宽的负担
• 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

五、AJAX具体操作流程：

• 首先通过PHP页面将数据库中的数据取出
• 取出后转成json格式的字符串，后利用ajax把字符串返还给前台
• 再利用json.parse解析通过循环添加到页面上
• 那么反之，前端的数据可以利用ajax提交到后台
• 但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
• 最后再由PHP将数据插入到数据库中

六、AJAX使用：

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

属性	描述
onreadstatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个javaScript函数
readyState	请求的状态。有5个：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回数据的文件
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = ‘文件未找到’、200 = ‘成功’,等等）
statusText	服务器返回的状态文本信息，HTTP状态码的响应文本（OK或Not Found（未找到）等等）

XMLHttpRequest 对象方法描述：

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

七、AJAX创建过程：

1、创建XML HttpRequest 对象，即创建一个异步调用对象。

1. 在IE浏览器中创建XMLHttpRequest对象的方式：var XMLHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
2. 在 Netscape 、 Firefox 浏览器 中创建 XMLHttpRequest 对象的方式：var XMLHttpRequest = new XMLHttpRequest();

2、创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息

创建 XMLHttpRequest 对象后，必须为 该对象创建HTTP 请求，用于说明 XMLHttpRequest 对象从哪里获取数据。XMLHttpRequest.open(method,URL,async,username,password)
1、method 参数是用于请求的 HTTP 方法。值包括 GET 、POST、HEAD、PUT、DELETE（不区分大小写）
2、url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个URL 与包含脚本的文本具有相同的主机名和端口
3、async 参数指示请求使用应该异步执行。如果这个参数为 false，代表请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接受； 如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
4、username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

3、设置响应HTTP请求状态变化的函数。

创建完 HTTP 请求之后，就可以将HTTP请求发送给Web 服务器了，发送 HTTP 请求的目的是为了接受从服务器中返回的数据。从创建XMLHttpRequest对象，到发送数据、接收数据，一共会经历5种状态
1、未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态
此时XMLHttpRequest对象的readyState属性值为0。
2、初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。
此时XMLHttpRequest对象的readyState属性值为1。
3、发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态。
此时XMLHttpRequest对象的readyState属性值为2。
4、接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。
此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。
5、完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。
此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

4、发送HTTP 请求。

如果XMLHttpRequest对象的readyState属性值等于4，表示异步调用过程完毕。这时候就可以获取数据了。
异步调用过程完毕，并不代表异步调用成功了，如果要判断异步调用是否成功，还要判断 XMLHttpRequest 对象的status属性值，只有status === 200 ，才表示异步调用成功。

5、获取异步调用返回的数据。

经过上面四个步骤后，就可以将HTTP 请求发到Web 服务器上去了，使用 XMLHttpRequest 的send() 方法。

6、使用JavaScript和DOM 实现局部刷新

八、ajax请求中：get和post的区别：

一、功能不同

  1、get是从服务器上获取数据。
  2、post是向服务器传送数据。

二、请求方式不同

  1、get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
  2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML header内一起传送到action属性所指的URL地址。用户看不到这个过程。

三、获取值不同

  1、对于get方式，服务器端用Request.QueryString获取变量的值。
  2、对于post方式，服务器端用Request.Form获取提交的数据。

四、传送数据量不同

  1、get传送的数据量较小，不能大于2KB。
  2、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

五、安全性不同

  1、get安全性非常低。
  2、post安全性较高。
  如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到

九、状态值：

0：该对象处于未初始化状态
1：该对象处于初始化状态
2：该对象处于发送数据状态
3：向客户端传送返回的结果
4：对象接收数据完毕后，进入完成状态

十、状态码：

200：确定。客户端请求已成功。
301：已永久移动。此请求和之后所有的请求都应该转到指定的 URI。
304：未修改。客户端请求的文档已在其缓存中，文档自缓存以来尚未被修改过。客户端使用文档的缓存副本，而不从服务器下载文档。
400：错误的请求。
401：访问被拒绝
403：服务器拒绝请求
404：服务器找不到请求的网页
500：内部服务器错误
502：后端服务器出现问题

十一、ajax创建的代码：

<script>
    function toJson(json) {
        const arr = []
        for (var name in json) {
            arr.push(`${name}=${json[name]}`)
        }
        return arr.join('&')
    }


    function ajax(json) {
        if (window.XMLHttpRequest) {
            var oAjax = new XMLHttpRequest()
        } else {
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
        }


        const Mrthods = json.type.toLowerCase()


        switch (Mrthods) {
            case 'get':
                oAjax.open(Mrthods, `${json.url}?${toJson(json.data)}`, true)
                oAjax.send()
                break;
            case 'post':
                oAjax.open(Mrthods, json.url, true)
                oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                oAjax.send('data=南浔&pwd=123456')
                break;
        }


        return new Promise((resolve, reject) => {
            oAjax.onreadystatechange = function () {
                const status = oAjax.status
                if (oAjax.readyState == 4) {
                    if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
                        resolve(JSON.parse(oAjax.responseText))
                    } else {
                        reject(status)
                    }
                }
            }
        })
    }
    
    ;(async () => {
        const data = await ajax({
            url: 'http://localhost:3002/signin/match',
            type: 'post',
            data: {
                data: '南浔',
                pwd: '123456'
            }
        })
        console.log(data,999666);
    })()
    
</script>