AJAX
处理的问题
怎么在保留当前页面信息的基础上显示新的信息
使用AJAX
24/3/2020
明确流程
- 创建ajax引擎对象
- 声明监听函数
a. 判断ajax状态码
b. 判断响应状态码
c. 获取相应信息(普通字符串或者json格式的字符串)
d. 处理响应
- 创建并发送ajax请求
a. 创建请求(设置请求方式,设置请求地址,设置异步或者同步)
b. 发送请求
- 其他处理
第一个AJAX请求
function testAjax() {
// ajax请求
// 创建Ajax引擎对象
var ajax;
if (window.XMLHttpRequest) {
// IE6以下不支持
ajax = new XMLHttpRequest();
}
// 声明时间监听
ajax.onreadystatechange = function () {
var data = ajax.responseText;
// 获取div对象
var div = document.getElementById("showDiv");
div.innerHTML = data;
}
// 发送请求
// 创建请求
ajax.open("get", "my");
// 发送
ajax.send(null);
}
流程
创建ajax引擎对象
声明事件监听:监听ajax对象的属性值,一旦readystate的值发生改变就会触发声明的函数的执行
创建并发送ajax请求
AJAX状态码学习
readyState的值
0:表示ajax引擎对象创建
1:表示请求创建但是未发送 ajax.open("get", "my");
2:请求发送 ajax.send(null)
3:正在接收响应的内容
4:响应内容接收完毕
改进
这样看之前的第一个ajax请求就有点冗余性了,用状态码判断对onreadystatechange监听的方法进行修改
ajax.onreadystatechange = function () {
if (ajax.readystate == 4){
var data = ajax.responseText;
// 获取div对象
var div = document.getElementById("showDiv");
div.innerHTML = data;
}
}
响应状态码
ajax.status
可能是200 404 500 就是服务器返回的那个状态码
200 正常
404 资源未找到
500 服务器错误
AJAX异步和同步
设置:
ajax.open(method,url,ansyc)
method:请求方式
get请求方式
请求数据以?隔开的形式拼接在url的后面
不能写在send里面
ajax.send(null)
post请求方式
如果有请求数据
先设置:
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
再在send里用键值对方式传入
ajax.send("uname=张山&pwd="123")
url:请求地址
ansyc:设置异步或者同步请求
false:同步
true:异步(默认)
异步:当前js函数继续执行,无需等待ajax请求的响应以及响应的处理
同步:当前js函数会等待ajax请求以及响应,当前ajax响应处理完毕后,继续执行函数的剩余代码。
JSON学习
JSON概念
其实json就是js创建对象的一种格式,保证对象中的数据的紧密型和完整性。
JSON格式
var 对象名={
键名:值,
键名:值
}
使用:在服务器端响应的数据拼接成json格式的字符串,这样客户端(浏览器)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据操作。
服务器拼接,使用Goson工具拼接。
JQuery的AJAX学习
使用流程
// get
$.get("data",{uname:value}, function (data) {
alert(data);
})
$.get(url, data, fn)
url:请求地址
data:请求参数,参数为json对象
fn:回调函数,函数有一个形参用来接收响应数据
$.post(url, data, fn)
url:请求地址
data:请求参数,参数为json对象
fn:回调函数,函数有一个形参用来接收响应数据
$.ajax(json格式的参数):参数比较多,详情参照api
jQuery API文档地址
Q.E.D.