Ajax(Asynchronous Javascript And XML)
Posted G.di
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax(Asynchronous Javascript And XML)相关的知识,希望对你有一定的参考价值。
文章目录
前言
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技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
以上是关于Ajax(Asynchronous Javascript And XML)的主要内容,如果未能解决你的问题,请参考以下文章
Ajax(Asynchronous Javascript And XML)
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
Ajax -Asynchronous Javascript And XML(异步 JavaScript 和 XML)
Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码