ajax常用在哪里,AJAX常用知识点及应用

一、AJAX是什么？是用来做什么的？

AJAX是Async JavaScript And XML(异步的JS和XML)的缩写，是JS通过异步的方式来获取响应并且局部更新页面。

常用的请求方法：

地址栏回车 //会替换当前页面

 //只能请求特定类型

//只能请求特定类型

//只能请求特定类型

//会替换当前页面

AJAX所带来的是局部更新页面。

二、XMLHttpRequest

XMLHttpRequest是一个API，它为客户端提供了在客户端和服务器之间进行数据传输的功能。它通过URL来获取数据，并且不会使页面整个刷新。它在AJAX中被大量使用。这个API挂在window上。

三、原生JS手写一个AJAX，背下来

点我

btn.onclick = function(){

var request = new XMLHttpRequest()

request.open('get','./data.json?id=1') //开启一个请求，不是发送；设置请求

request.setRequestHeader('x-limingru','yyy') //设置请求头

request.onreadystatechange = function(){ //只要readystate变化了就会触发这个函数，要想让它触发5次，应该放在最前面

if(request.readyState === 4){ //响应已经下载完毕，请求完成(虽然不一定成功，但是过程完成)

if(request.status >=200 && request.status < 300){

console.log(request.status) // 获取响应码

console.log(request.statusText) // 状态文

console.log(request.getAllResponseHeaders()) //获取响应头

console.log(request.responseText) //获取响应的文本

alert('请求成功')

}else{

alert('请求失败')

}

}

}

request.send('post请求体') //这是http请求的第四部分请求体,但是get请求默认是没有第四部分的，设置了也不会报错，post就有请求体

}

四、jQuery写一个AJAX，背下来

click me

btn.onclick = function(){

$.get/post({

url:'./data.json',

data:{ id:1, name:'limingru' }, //如果是get这里就是查询参数，如果是post就会出现在请求体里

success: function(response,status,xhr){

console.log(response)

console.log(status)

console.log(xhr) //这里面封装了XMLHttpRequest的方法，可以从中调用

},

error: function(){

console.log('请求失败')

}

})

}

下面这个用了ajax，只是多了一个method

click me

btn.onclick = function(){

$.ajax({

method:'get',

url:'./data.json',

data:{ id:1, name:'limingru' },

success: function(response,status,xhr){

console.log(response)

console.log(status)

console.log(xhr.getAllResponseHeaders())

},

error: function(){

console.log('请求失败')

}

})

}