AJAX

处理的问题
怎么在保留当前页面信息的基础上显示新的信息
使用AJAX

24/3/2020

明确流程

  1. 创建ajax引擎对象
  2. 声明监听函数

a. 判断ajax状态码
b. 判断响应状态码
c. 获取相应信息(普通字符串或者json格式的字符串)
d. 处理响应

  1. 创建并发送ajax请求

a. 创建请求(设置请求方式，设置请求地址，设置异步或者同步)
b. 发送请求

  1. 其他处理

第一个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.

深至缄默，如云漂泊