AJAX笔记

原创已于 2022-06-20 23:13:45 修改 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

于 2022-01-18 12:02:46 首次发布

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了AJAX（异步JavaScript和XML）的工作原理和技术要点，包括如何创建和使用XMLHttpRequest对象来实现局部页面刷新，以及通过示例代码展示了如何处理服务器响应。

AJAX:Asynchronous JavaScript and XML (异步的JavaScript 和XML)

AJAX主要做局部刷新

操作需要异步对象（XMLHttpRequert，JS中的对象）

异步对象

22:24

ajax中使用XMLHttpRequest对象

1)创建异步对象var xm1Http = new XMLHttpRequest() ;

2)给异步对象绑定事件。onreadystatechange :当异步对象发起请求，获取了数据都会触发这个事件。

这个事件需要指定-一个函数，在函数中处理状态的变化。

3)初始化异步请求对象

4)发送请求

例如:

xmlHttp . onreadystatechange= function () {

处理请求的状态变化。

}

异步对象的属性readystate 表示异步对象请求的状态变化

0: 创建异步对象时， new XMLHttpRequest() ;

1:初始异步请求对象，xm1Http . open()

2:发送请求，xmnlHttp. send()

3:从服务器端获取了数据，此时3，注意3是异步对象内部使用，获取了原始的数据。

4:异步对象把接收的数据处理完成后。此时开发人员在4的时候处理数据

回调:当请求的状态变化时，异步对象会自动调用onreadys atechange事件对应的函数.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiaoqiu</title>
</head>
<body>
    <script src="JQuery.js"></script>
    <script text="text/javascript">
        //1.创建异步对象
        var XMLHttp = new XMLHttpRequest();
        //2.给异步对象绑定事件。onreadystatechange 
        XMLHttp.onreadystatechange=function(){
            if(XMLHttp.readyState==4 &&  XMLHttp.status==200){
                var data=XMLHttp.responseText//从服务器获取数据
                alert(XMLHttp.readyState);
                //处理服务器的数据，对页面进行更改
                $("div").text(data);
                alert(XMLHttp.readyState);
            }
        }
        alert(XMLHttp.readyState);
	//3初始化异步请求对象
        XMLHttp.open("get","localhost",true)//初始化异步请求对象
        //open("请求方式get,post","服务器地址","同步还是异步 默认是异步true")
        alert(XMLHttp.readyState);
	//4.发送请求
        XMLHttp.send()//发送请求
        alert(XMLHttp.readyState);
    </script>
    <div></div>
</body>
</html>

获取后端Json格式数据进行解析

varxmlHttpRequest=newXMLHttpRequest();
xmlHttpRequest.onreadystatechange=function(){
	if(xmlHttpRequest.status==200&&xmlHttpRequest.readyState==4){
		//获取后端json数组格式的数据，然后进行解析
		vardatas=xmlHttpRequest.responseText;
		window.eval("varprovinces={'province':["+datas+"]}");//城市json
		vardata=provinces.province;
		varhtml="<option>请选择省份</option>";
		for(vari=0;i<data.length;i++){
		vartemp=data[i];
		html=html+"<option>"+temp.provinceName+"</option>";
		}
	document.getElementById("province").innerHTML=html;
	}
}
xmlHttpRequest.open("get","province",true);
xmlHttpRequest.send();


<scripttype="text/javascript">
window.onload=function(){
	document.getElementById("province").onchange=function(){
		varval=$("#province").val();
		varxmlHttpRequest=newXMLHttpRequest();
		xmlHttpRequest.onreadystatechange=function(){
		if(xmlHttpRequest.status==200&&xmlHttpRequest.readyState==4){
			vardatas=xmlHttpRequest.responseText;
			window.eval("varcitys={'city':["+datas+"]}");
			varcityobjs=citys.city;
			varhtml="<option>请选择城市</option>";
			for(vari=0;i<cityobjs.length;i++){
				vartemp=cityobjs[i];
				html=html+"<option>"+temp.cityName+"</option>";
			}
			document.getElementById("city").innerHTML=html;
		}
	}
	xmlHttpRequest.open("get","city?province="+val,true);
	xmlHttpRequest.send();
	}
}