文章目录
前言
Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应，实现通过JavaScript进行网络编程。
应用场景：
（1）按需获取数据
（2）对用户数据进行校验
（3）自动更新页面内容
（4）提升用户体验
一、原生Ajax
原生Ajax的发送请求的步骤
（1）创建一个XMLHttpRequest类型对象
（2）准备发送，打开一个与网址之间的连接
（3）执行发送动作
（4）指定xhr状态变化事件处理函数
1.xhr对象
AJAXAPI中核心提供的是一个XMLHttpRequest类型，所有的AJAX操作都需要使用到这个类型。
IE6存在兼容问题，为了解决这个兼容问题，可以书写以下代码：
<script>
//创建一个xhr对象
var xhr = null
//IE6兼容写法
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject();
}
</script>
2.open方法
xhr.open(method,url)
method：要是用的http方法，如GET、POST、PUT、DELETE等
url：要向其发送请求的URL地址，字符串格式。
//open方法
xhr.open("GET","https://jsonplaceholder.typicode.com/users")
3.send方法和请求头
如果使用get方法请求，那么不需要send方法中不需要传参数，只需在url网址中书写，post方法必须要传参数，而且需要在open和send中间设置请求头。
设置请求头的方法：setRequestHeader（“Content-type”，“application/x-www-form-urlencoded”）
send中传入需要修改和增加的参数。
//创建一个xhr对象
var xhr = null;
//IE6兼容写法
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject();
}
//open方法
xhr.open("POST","https://jsonplaceholder.typicode.com/users")
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
//发送数据
xhr.send("name=gd&age=22")
4.响应状态分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//创建一个xhr对象
var xhr = null;
//IE6兼容写法
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject();
}
//open方法
xhr.open("POST","https://jsonplaceholder.typicode.com/users")
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
//发送数据
xhr.send("name=gd&age=22")
xhr.onreadystatechange = function () {
// 通过判断 xhr 的 readyState ，确定此次请求是否完成
if (this.readyState === 4) {
console.log(this.responseText)
}
}
</script>
</body>
</html>
5.同步和异步
open还有第三个参数，为布尔值true和false，true为异步加载，false为同步加载。
建议：通常使用异步加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//创建一个xhr对象
var xhr = null;
//IE6兼容写法
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject();
}
//open方法
xhr.open("POST","https://jsonplaceholder.typicode.com/users",true)
//设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.onreadystatechange = function () {
// 通过判断 xhr 的 readyState ，确定此次请求是否完成
if (this.readyState === 4) {
console.log(this.responseText)
}
}
//发送数据
xhr.send("name=gd&age=22")
console.log("after")
</script>
</body>
</html>
二、jQuery封装的Ajax库
1.$.ajax()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$.ajax({
url: "http://localhost:3000/users",
type: "GET",
dataType: "json",
data: {"id": 2},
success: function (data) {
console.log(data)
}
})
</script>
</body>
</html>
2.$.get()
$.get(url,data,callback)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$.get("http://localhost:3000/users",{"id": 2},function (data) {
console.log(data)
})
</script>
</body>
</html>
3.$.post()
$.post(url,data,callback)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$.post("http://localhost:3000/users",{"name": "gg","age": 12,"class": 3},function (data) {
console.log(data)
})
</script>
</body>
</html>
三、Axios库
1.axios API
axios(config)
axios(url, config)config可选 (config为对象格式的配置选项)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: "/users",
method: "post",
baseURL: "http://localhost:3000",
header: {"Content-Type": "application/json"},
data: {
"name" : "dd",
"age": 20,
"class": 3
}
}).then(function (gg) {
console.log(gg.data)
}).catch(function (err) {
console.log(err)
})
</script>
</body>
</html>
2.axios拦截器
在请求或响应被then或catch处理前拦截它们。
3.get和post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get("http://localhost:3000/users",{
params: {
"id" : 8
}
})
.then(function (res) {
console.log(res.data)
})
axios.post("http://localhost:3000/users",{
"name": "ax",
"age": 23,
"class": 2
})
.then(function (res) {
console.log(res.data)
})
</script>
</body>
</html>
四、跨域
1.jQuery对jsonp跨域的支持
jQuery 中使用JSONP就是将dataType 设置为 jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="请求" class="btn">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(".btn").click(function () {
// 发送跨域的 ajax 请求
$.ajax({
url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
type: "GET",
dataType: "jsonp",
jsonp: "cb", //这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
jsonpCallback: "abc", //jQ 自动分配的回调函数的名称进行重命名
data: {"wd": "ajax"},
success: function (data) {
console.log(data)
}
})
})
</script>
</body>
</html>
2.cros跨域
这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。
总结
这部分就学习到这里啦，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
