原生AJAX

1.1 AJAX 简介

AJAX 就是异步的 JS 和 XML，最大的优势：异步刷新。通过AJAX可以在浏览器中向服务器发送异步请求，AJAX 不是新的编程语言，不是新的一门独立的技术，而是一种使用现有标准的新方法。

1.2 XML简介

XML 可扩展标记语言。XML 被设计用来传输和存储数据。都是自定义标签，用来表示一些数据。现在已经被JSON取代了。

1.3 AJAX的特点

1.3.1 AJAX的优点

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

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

1.3.2 AJAX的缺点

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

2. 存在跨域问题
   

3. SEO不友好
   

1.5 AJAX的使用

1.5.1 核心对象

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

1.5.2 使用步骤

//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.调用open方法,设置请求方法和url
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.发送请求
xhr.send(body) //get请求不传body参数，只有post请求使用
//4.接收响应
xhr.onreadystatechange = function (){
  if(xhr.readyState == 4 && xhr.status == 200){
		var text = xhr.response;
		console.log(text);
      //xhr.response       //接收返回的响应数据
	  //xhr.responseXML    //接收xml格式的响应数据
	  //xhr.responseText   //接收文本格式的响应数据
  }
}

1.5.2.1 get的使用

server.js

const express=require("express")

const app=express()
app.use(express.static(__dirname+"/public"))
app.get("/get",(req,res)=>{
    res.send("get请求")
})
app.listen(3000,()=>{
    console.log("run")
})

get.html

<script>
    //1.创建XMLHttpRequest对象
    let xhr=new XMLHttpRequest()
	//2.调用open方法,设置请求方法和url  (get请求要带参数在?后面写)
    xhr.open("get","http://localhost:3000/get?name=zhangsan")
	//3.发送请求
    xhr.send()
	//4.接收响应
    xhr.onreadystatechange=()=>{
        if(xhr.readyState===4 && xhr.status===200){
            console.log(xhr.response)
        }
    }
</script>

1.5.2.2 post的使用

server.js

const express=require("express")
const app=express()
app.use(express.static(__dirname+"/public"))
app.post("/post",(req,res)=>{
    res.send("post请求")
})

app.listen(3000,()=>{
    console.log("run")
})

post.html

<script>
    let xhr=new XMLHttpRequest()
    xhr.open("post","http://localhost:3000/post")
    //post请求必须设置请求头,并且设置在send()前
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //post请求的参数在send()设置
    xhr.send("name=zhangsan")

    xhr.onreadystatechange=()=>{
        if(xhr.readyState===4 && xhr.status===200){
            console.log(xhr.response)
        }
    }
</script>

1.5.3 解决IE缓存问题（只有get请求存在这个问题）

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

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

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

1.5.4 AJAX请求状态

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

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

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

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

3: 对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。

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

1.5.5 取消上一次请求

xhr.abort()

第2章：jQuery中的AJAX(简写)

2.1 get请求

$.get(url, [data], [callback], [type])     //一般用前三个

url:请求的URL地址。

data:请求携带的参数。

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

type:设置返回内容格式，xml, html, script, json, text, _default。

2.2 post请求

$.post(url, [data], [callback], [type])    //一般用前三个

url:请求的URL地址。

data:请求携带的参数。

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

type:设置返回内容格式，xml, html, script, json, text, _default。

第3章：跨域

3.1同源(同域)

同源： 协议、域名、端口号 必须完全相同。

3.2非同源受到哪些限制？

1. Cookie不能读取；
2. DOM无法获得；
3. Ajax请求不能获取数据

3.3ajax和form表单的跨域问题

ajax----ajax引擎-----遵守同源策略
form----浏览器其他模块-----不遵守同源策略，但是返回的是新页面

3.4如何解决跨域

3.4.1 JSONP（只能解决get请求）

1. JSONP是什么
   

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

2）

关于jsonp解决跨域

• 1.原理：利用了script标签发请求不受同源策略的限制。所以不会产生跨域问题
  

• 2.套路：动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
  

• 3.弊端：(1).只能解决get请求跨域的问题。(2).后端工程师必须配合前端
  

• 4.备注：有这样一种感觉：前端定义函数，后端“调用”。后端返回的数据，前端以js格式解析，并且运行。
  

3）原生JSONP

前端页面写法：

<script>
let btn = document.getElementById('btn')
  btn.onclick = function () {
    //1.提前定义好一个等待被调用的函数
    window.getData = function(result) {
      console.log(result)
    }
    //2.创建一个script节点
    const scriptNode = document.createElement('script')
    //3.为节点指定src地址，同时指定好回调函数的名字
    scriptNode.src = 'http://localhost:3000/test?callback=getData'
    //4.将节点插入页面
    document.body.appendChild(scriptNode)
  }
</script>

后端页面写法：

let express = require('express')
let app = express()
app.get('/test',function (req,res) {
  let {callback} = req.query
  console.log(callback)
  let personArr = [{name:'peiqi',age:12},{name:'suxi',age:16}]
  res.send(`${callback}(${JSON.stringify(personArr)})`)
})

app.listen(3000,function (err) {
  if(err) console.log(err)
  else {
    console.log('演示jsonp解决跨域服务器，启动成功了！')
    
  }
})

4. jQuery中的JSONP  
   

前端页面写法：(设置jsonp格式)

<script>
    $.ajax({
      url:'http://localhost:3000/test',
      method:'get',
      dataType:'jsonp', //该属性，控制了上面的4步
      data:{name:'zhangsan',age:18},
      success:function (result) {
        console.log(result)
      },
      error:function (err) {
        console.log(err)
      }
    })
</script>

后端页面写法：(和原生一样)

let express = require('express')
let app = express()
app.get('/test',function (req,res) {
  let {callback} = req.query
  console.log(callback)
  let personArr = [{name:'peiqi',age:12},{name:'suxi',age:16}]
  res.send(`${callback}(${JSON.stringify(personArr)})`)
})

app.listen(3000,function (err) {
  if(err) console.log(err)
  else {
    console.log('演示jsonp解决跨域服务器，启动成功了！')
    
  }
})

3.4.2 CORS

1. CORS是什么？
   

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

2. CORS怎么工作的？
   

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

3. CORS的使用
   

前端页面:(发送正常的ajax请求，不需要任何操作)

后端页面：（以Node为例：）

//配置CORS
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63342'); //第一个参数是固定语法，第二个参数是前端请求过来的url