再走一遍ajax基础

Posted 2022-11-28 十九万里

http请求：

如何发送一个普通HTTP请求：

• 输入网址，回车
• 刷新
• 表单

除了上述三种请求外，其余的称为AJAX请求：

• xhr
• fetch(后面学)

NODE是一个javascript的运行环境。

一、原生AJAX

1.1 AJAX 简介

AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

ajax的作用：调用地址（API）,可以得到该地址的响应信息。

1.2 XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML和html类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据：

name = "孙悟空" ; age = 18 ; gender = "男" ;  

用XML表示：

<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在XML基本已经被JSON取代了。用json表示：

    "name":"孙悟空",
    "age":18,
    "gender":"男"

1.3、AJAX的特点

1.3.1、AJAX的优点

1. 可以无需刷新页面而与服务器端进行通信。

2. 允许你根据用户事件来更新部分页面内容。

1.3.2、AJAX的缺点

1. 没有浏览历史，不能回退

2. 存在跨域问题

3. SEO不友好

1.4、AJAX的使用

1.4.1、核心对象

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

1.4.2 使用步骤

1. 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2. 设置请求信息

xhr.open(method, url);

3. 可以设置请求头，根据API需要选择是否要设置

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 && xhr.status == 200)
            var text = xhr.responseText;
            console.log(text);
      

1.4.3、解决IE缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址即可避免缓存问题

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

1.4.4、AJAX请求状态

xhr.readyState 可以用来查看请求当前的状态

0: 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

1: 表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。

2: 表示send()方法已经执行，并且头信息和状态码已经收到。

3: 表示正在接收服务器传来的body部分的数据。

4: 表示服务器数据已经完全接收，或者本次接收已经失败了

1.5、API

• XMLHttpRequest(): 创建XHR对象的构造函数
• status: 响应状态码值, 比如200, 404
• statusText: 响应状态文本
• readyState: 标识请求状态的只读属性
  • 0: 初始
  • 1:open()之后
  • 2: send()之后
  • 3: 请求中
  • 4: 请求完成
• onreadystatechange: 绑定readyState改变的监听
• responseType: 指定响应数据类型, 如果是’json’, 得到响应后自动解析响应体数据
• response: 响应体数据, 类型取决于responseType的指定
• timeout: 指定请求超时时间, 默认为0代表没有限制
• ontimeout: 绑定超时的监听
• onerror: 绑定请求网络错误的监听
• open(): 初始化一个请求, 参数为: (method, url[, async])
• send(data): 发送请求
• abort(): 中断请求
• getResponseHeader(name): 获取指定名称的响应头值
• getAllResponseHeaders(): 获取所有响应头组成的字符串
• setRequestHeader(name, value): 设置请求头

二、jQuery中的AJAX

2.1、get请求

$.get(url, [data], [callback], [type])

url:请求的URL地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式。

2.2、post请求

$.post(url, [data], [callback], [type])

url:请求的URL地址。

data:请求携带的参数。

callback:载入成功时回调函数。

type:设置返回内容格式。

三、跨域:针对于AJAX请求而言的。

3.1、同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源： 协议、域名、端口号 必须完全相同。 两个资源必须来自同一个服务.

违背同源策略就是跨域。

3.2、如何解决跨域

3.2.1、JSONP

• JSONP是什么

​ JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

• JSONP怎么工作的？

​ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。JSONP就是利用script标签的跨域能力来发送请求的。

• JSONP的使用

  // const wd = document.querySelector("input[name=wd]");
  // const search = document.querySelector("#search");
  // function abc(res)
  //     if(res.g)
  //         search.innerHTML = res.g.map(item=>(`
  //             <p>$item.q</p>
  //         `)).join("")
  //     else
  //         search.innerHTML = `<p>无数据</p>`
  //     
  // 
  // wd.onkeyup = function()
  //     const script = document.createElement("script");
  //     script.src="https://www.baidu.com/sugrec?prod=pc&wd="+this.value+"&cb=abc";
  //     document.body.appendChild(script);
  // 
  

3.2.3、CORS

• CORS是什么？

​ CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。

• CORS怎么工作的？

​ CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

• CORS的使用

  app.use(function (req,res,next)
      // * 不限制
      // 1- 不限制来源
      // res.set("Access-Control-Allow-Origin","*");
      // res.set("Access-Control-Allow-Headers","Content-Type,authorization");
  
  
      // 2- 指定一个来源
      // res.set("Access-Control-Allow-Origin","http://localhost:63342");
      // res.set("Access-Control-Allow-Headers","Content-Type,authorization");
              
      // 3-指定多个来源
      console.log(req.headers.origin);// 获得请求源
      const originArr = ["http://localhost:63342","http://192.168.15.22"]
      if(originArr.includes(req.headers.origin))
          // 设置允许的域
          res.set("Access-Control-Allow-Origin",req.headers.origin);
          // 设置允许携带的请求头
          res.set("Access-Control-Allow-Headers","Content-Type,authorization");
          // 设置允许的请求方式。
          res.set("Access-Control-Allow-Methods","DELETE,PUT");
      
      next();
  )
  
  
  

3.2.3、配置代理服务器(proxy server)（常用）

//方法一
// app.get("/movieOnInfoList",function (req,res)
//     // 1-通过request第三方模块。
//     // 1-1 下载
//     //    cnpm install request -S
//     // 1-2 引入
//     //    const request = require("request");
//     // 1-3 使用
//     const url = "https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=6969D680202711ECB739B7CCC9E549248E60CFF9844C4599B902CE49BEB2E89D&optimus_risk_level=71&optimus_code=10";
//     // 第一个参数是请求地址，第二个参数是一个回调函数
//     request(url,function(err,response,body)
//         if(!err && response.statusCode === 200)
//             res.json(JSON.parse(body));
//         else
//             res.json(
//                 ok:-1,
//                 msg:"网络连接错误，请稍后再试。"
//             )
//         
//     )
// )




//方法二
app.get("/movieOnInfoList",function (req,res)
    // 1-通过axios第三方模块。
    // 1-1 下载
    //    cnpm install axios -S
    // 1-2 引入
    //    const request = require("axios");
    // 1-3 使用
    const url = "https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=6969D680202711ECB739B7CCC9E549248E60CFF9844C4599B902CE49BEB2E89D&optimus_risk_level=71&optimus_code=10";
    // 第一个参数是请求地址，第二个参数是一个回调函数
    axios.get(url).then(value=>
        res.json(value.data);
    )
)