原生AJAX
1.1 AJAX 简介
AJAX 就是异步的 JS 和 XML,最大的优势:异步刷新。通过AJAX可以在浏览器中向服务器发送异步请求,AJAX 不是新的编程语言,不是新的一门独立的技术,而是一种使用现有标准的新方法。
1.2 XML简介
XML 可扩展标记语言。XML 被设计用来传输和存储数据。都是自定义标签,用来表示一些数据。现在已经被JSON取代了。
1.3 AJAX的特点
1.3.1 AJAX的优点
-
可以无需刷新页面而与服务器端进行通信。
-
允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX的缺点
-
没有浏览历史,不能回退
-
存在跨域问题
-
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请求)
-
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解决跨域服务器,启动成功了!')
}
})
-
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
-
CORS是什么?
CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。
-
CORS怎么工作的?
CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。
-
CORS的使用
前端页面:(发送正常的ajax请求,不需要任何操作)
后端页面:(以Node为例:)
//配置CORS
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:63342'); //第一个参数是固定语法,第二个参数是前端请求过来的url