K-BOlG
nengkai
2021-03-17
目录

ajax

# 原生 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 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")
})
1
2
3
4
5
6
7
8
9
10

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
2
3
4
5
6
7
8
9
10
11
12
13
14

# 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")
})
1
2
3
4
5
6
7
8
9
10

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
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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

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

# 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()
1

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

# 2.1 get 请求

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

url: 请求的 URL 地址。

data: 请求携带的参数。

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

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

# 2.2 post 请求

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

url: 请求的 URL 地址。

data: 请求携带的参数。

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

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

# 第 3 章：跨域

# 3.1 同源 (同域)

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

# 3.2 非同源受到哪些限制？

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

# 3.3ajax 和 form 表单的跨域问题

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

# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

后端页面写法：

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解决跨域服务器，启动成功了！')
    
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  1. 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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解决跨域服务器，启动成功了！')
    
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3.4.2 CORS

  1. CORS是什么？

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

  1. CORS怎么工作的？

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

  1. CORS的使用

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

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

//配置CORS
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63342'); //第一个参数是固定语法，第二个参数是前端请求过来的url
1
2
编辑 (opens new window)
#A#J#A#X# #-
上次更新: 4/28/2022, 6:47:46 PM
http
node

← node→

最近更新
01
前端常用设计模式
04-01
02
谷歌调试快捷键
06-23
03
JS设计模式
06-02
更多文章>
Theme by Vdoing | Copyright © 2022-2023