ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。
ajax() 方法通过 HTTP 请求加载远程数据。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。
XMLHttpRequest 对象是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest是ajax的核心机制,如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。
AJAX如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时,就会触发 onreadystatechange 事件。
XMLHttpRequest对象的属性:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值:
1、(未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
2、(初始化) 对象已建立,尚未调用send方法
3、(发送数据) send方法已调用,但是当前的状态及http头未知
4、(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错 误,
5、(完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
其他方法:
原生Ajax请求GET方式:
<button>点击发送请求</button>
<div id="res"></div>
<script>
const btn = document.getElementsByTagName('button')
const result = document.getElementById('res')
btn[0].onclick = function (){
//创建对象
const xhr = new XMLHttpRequest()
//设置请求方法和url
xhr.open('GET', 'http://localhost:8000/server')
//发送
xhr.send()
//事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){ //服务端返回了所有结果
if(xhr.status >= 200 && xhr.readyState<=300){ //2开头的都表示成功
//处理结果
console.log(xhr.status) //状态码
console.log(xhr.statusText) //状态字符串
console.log(xhr.getAllResponseHeaders) //所有响应头
console.log(xhr.response) //响应体
result.innerHTML = xhr.response
}
}
}
</script>
原生Ajax请求POST方式:
<div id="res"></div>
<script>
const result = document.getElementById('res')
result.onmouseover = function(){
const xhr = new XMLHttpRequest()
xhr.open('POST', 'http://localhost:8000/server')
//设置请求头
//contentType
//类型:String
//默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//必须写在open和send中间
xhr.send('a=100&b=200&c=3')
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status<300){
result.innerHTML = xhr.response
}
}
}
}
</script>
Jquery-Ajax请求GET方式:
function JqueryAjaxGET(){
$.get('http://localhost:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data)
})
}
Jquery-Ajax请求POST方式:
function JqueryAjaxPOST(){
$.post('http://localhost:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data)
}, 'json')
})
Jquery-Ajax请求通用型方式:
function JqueryAjaxTY(){
$.ajax({
//url
url:'http://localhost:8000/jquery-server',
//参数
data:{a:100, b:222},
//请求类型
type:'GET',
//响应体结果
dataType:'json',
//成功的回调
success:function(data){
console.log(data)
},
//超时时间
timeout:2000,
//失败的回调
error:function(){
console.log('出错了')
},
//头信息设置
headers:{
c:300,
d:400
}
})
})