【前端】AJAX详解

简介

        之前在项目中用到AJAX，是前端的技术，但是感觉作为后端开发者，对它的掌握还是很有必要的。

        AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。特点是可以在浏览器中向服务器发送异步请求，最大的优势就是无刷新获取数据。

XML简介

        XML是可扩展标记语言。XML中没有预定义标签，全都是自定义标签，用来表示一些数据。现在已被JSON取代。

使用

核心对象

        XMLHttpRequest，AJAX  的所有操作都是通过该对象进行的。

使用步骤（八股文建议直接记）

        首先需要创建server，使用node.js，值得一提的是，nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。安装命令：

npm i -g nodemon

        开启如下的服务：

const express = require('express');

const app = express();

app.listen(9000, ()=>{
    console.log("服务已经启动！");
})

         创建如下的服务。其中all表示支持任何请求，另外可选get，post等，这里就不再赘述。

app.all('/server', (request, response)=>{
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.send('hello AJAX(get)-s');
});

1. 创建XMLHttpRequest对象

   var xhr = new XMLHttpRequest();

2. 设置请求信息

   xhr.open(method, url);
   //可以设置请求头，一般不设置
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3. 发送请求

   xhr.send(body)        //get请求不传body参数，只有post请求使用

4. 接收响应

   //xhr.responseXML 接收 xml 格式的响应数据 
   //xhr.responseText 接收文本格式的响应数据
   
   xhr.onreadystatechange = function(){
                   if(xhr.readyState === 4){
                       if(xhr.status >= 200 && xhr.status < 300){
                           console.log(xhr.status);
                       }else{
   
                       }
                   }
               }

 请求状态

        XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest  代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：

jQuery中使用AJAX

get请求

$.post(url, [data], [callback], [type]) url:请求的  URL  地址。
        data:请求携带的参数。
        callback:载入成功时回调函数。
        type:设置返回内容格式，xml, html, script, json, text, _default。

$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            }, 'json');

post请求

$.post(url, [data], [callback], [type]) url:请求的  URL  地址。
        data:请求携带的参数。
        callback:载入成功时回调函数。
        type:设置返回内容格式，xml, html, script, json, text, _default。

$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            }, 'json');

AJAX请求

        AJAX请求的参数比较多，详细移步：jQuery ajax - ajax() 方法

        下面给出一个示例：

$.ajax({
        url:'http://127.0.0.1:8000/delay',
        data:{a:100, b:200},
        type:'GET',
        // 响应体结果设置
        dataType:'json',
        success:function(data){
            console.log(data);
        },
        timeout:2000,
        error:function(){
            console.log("error");
        },
        headers:{
             c:300,
             d:400
        }
    })

常见问题解决

IE缓存问题

        问题：在一些浏览器中(IE),由于缓存机制的存在，ajax  只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
        解决方式：浏览器的缓存是根据  url  地址来记录的，所以我们只需要修改  url  地址 即可避免缓存问题。

xhr.open("get","/testAJAX?t="+Date.now());

跨域问题

        同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源：协议、域名、端口号    必须完全相同。违背同源策略就是跨域。

        下面给出两种解决方案。

JSONP

        JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持  get 请求。在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP  就是利用  script  标签的跨域能力来发送请求的。

        使用方式 

        普通方式

        1.动态的创建一个script标签

const srcipt = document.createElement('script');

        2.设置  script  的  src，设置回调函数

srcipt.src = 'http://127.0.0.1:9000/check-username';

function handle(data){
    input.style.border = "solid 1px #f00";
    p.innerHTML = data.msg;
}

         3.将  script  添加到  body 中

document.body.append(srcipt);

        4.服务器中的处理

app.all('/check-username', (request, response)=>{
    const data = {
        exist:1,
        msg:'exist!'
    }
    let str = JSON.stringify(data);
    response.end(`handle(${str})`);
});

         jQuery模式

        通过 HTTP GET 请求载入 JSON 数据。

        在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

$.getJSON('http://127.0.0.1:9000/jquery-jsonp-server?callback=?', function(data){
    $('#result').html(`
        名称：${data.name}<br>,
        校区：${data.city}
        `);
    });

         在服务端进行如下配置：

app.all('/jquery-jsonp-server', (request, response)=>{
    let cb = request.query.callback;
    const data = {
        name:'xugao',
        city:['北京','上海','深圳'],
    }
    let str = JSON.stringify(data);
    response.end(`${cb}(${str})`);
});

CORS

        CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源。CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

        使用方法

router.get("/testAJAX" , function (req , res) {
    //通过  res  来设置响应头，来允许跨域请求
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
    res.set("Access-Control-Allow-Origin","*");
    res.send("testAJAX  返回的响应"); 
});