AJAX——创建快速动态网页

JavaScript原生异步通信

// 1、声明异步对象
let xhr = new window.XMLHttpRequest();
console.log(xhr.readyState);

// 2、创建异步监听
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.status);
		console.log("数据接收完毕");
		
		// 5、获取响应数据
		let response = xhr.response;
		console.log(response);
		}
	}
	
// 3、打开连接
xhr.open("get", "");

// 4、开始请求
xhr.send();

readyState五种状态

0:未初始化
1：载入/正在发送请求
2：载入完成/数据接收
3：正在解析响应内容
4：响应内容解析完成，可以在客户端调用了

status状态码

200：请求成功（OK）
303：重定向
400：请求错误、401：未授权、403：禁止访问、404：文件未找到
500：服务器错误

jQuery实现异步通信

load()方法：用于从服务器加载数据并将内容填充

$("div").load("", function(data,status,xhr){
	// 将响应的数据填充到div中
	$("div").text(data);
	});
	

get()方法：把返回的数据交给用户处理，是全局函数

// 第一个参数为响应数据,第二个参数为状态码，第三个参数为xmlhttprequest对象
$("div").get("", function(data,status,xhr){
	console.log(status,xhr);
	});

post()方法

$("div").post("",function(data,staus,xhr){
	console.log(status,xhr);
	});

AjAx实现异步通信

function ajax(){
	$.ajax({
		url:"data.txt?name=zzy",
		type:"GET",
		dataType:"jsonp", //解决跨域问题
		success:function(data,status,xhr){
			document.getElementById("info").text=data;
			console.log(status,xhr);
})