局部刷新技术,异步请求
作用是请求后端接口 返回数据到前端前端根据需求渲染数据到界面
一.五步法
1.创建对象 var http=new XMLHttpRequest();
2.建立连接 http.open()
3.发送请求 http.send()
4.监听事件 http.onreadystatechange=function(){}
5.渲染界面
1.创建ajax对象
var http=new XMLHttpRequest();
2.建立连接
2.1 格式
http.open('get', url, true)
http.send('post', data)
2.2 参数解释
2.3 参数理解
2.3.1 get和post
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
1.get方式
http.open('get', 'www.baidu.com', true)
http.send()
2.post方式
http.open('post', 'www.baidu.com', true)
http.send('fname=Bil&lname=Gates')
2.3.2 同步异步
同步强调的是顺序性,谁先谁后;异步则不存在这种顺序性。
同步:等待请求完成之后在执行后续代码 false
异步:请求和后续代码同时执行 true
3.事件监听
http.onreadystatechange=function(){
http.status
http.readyState
http.response
http.responseText
http.responseXML
}
3.1 两种连接状态参数
参数 | |
---|---|
status | 200:服务器响应成功 500:服务器报错 404:服务器丢失 |
readyState | 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
3.2 三种返回数据
http.response
http.responseText
http.responseXML
二.兼容性处理
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
三.AJAX封装
异步执行,通过回调函数实现
function Ajax(method, url, data, callback) {
var http;
//兼容性处理
if (window.XMLHttpRequest) {
http = new XMLHttpRequest()
} else {
http = new ActiveXObject("Microsoft.XMLHTTP")
}
//判断方式是get还是post
if (method = 'get') {
if (data) {
url += '?'
url += data
}
http.open(method, url)
http.send()
} else {
http.open(method, url);
if (data) {
http.send(data)
}
http.send()
}
//事件监听
http.onreadystatechange = function () {
//判断是否建立连接
if (http.readyState == 200 && http.status == 4) {
callback(http.response);
}
}
}
var res = null;
//用回调函数返回所需数据
Ajax("get", "http://localhost:63342/web前端课程1017/0110/data/city.json", null, function (result) {
var data = eval(result);
res = data;
});