[第一弹]ajax简单应用

最新推荐文章于 2023-06-20 11:47:50 发布

l_xm

最新推荐文章于 2023-06-20 11:47:50 发布

阅读量369

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/sinat_16968575/article/details/39993019

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax(全称:Asynchronous JavaScript And XML )

ajax是一门利用JS和XML与服务器交换数据的一门语言.

传统的web程序工作原理图：

Ajax工作原理图：

创建XMLHttpRequest对象有两种情况:

1.在IE浏览器下:

var xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

2.在W3C模型浏览器下(google chrome/firefox/opera):

var xmlHttp = new XMLHttpRequest();

为了适应不同的浏览器,达到兼容性,可以创建一个公共JS文件,用来生成xmlHttpRequest对象

代码1-1,public.js:

function createXMLHttp(){
	/* var xmlHttp;
	try{
		xmlHttp = new XMLHttpRequest();
		return xmlHttp;
	}
	catch(e){}
	try{
		xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
		return xmlHttp;
	}
	catch(e){} */
	var xmlHttp;
	if(window.ActiveXObject){
		xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
	}
	else{
		xmlHttp = new XMLHttpRequest();
	}
	return xmlHttp;
}

Ajax相关方法:

1. open(method,url)

初始化ajax对象

method：请求方式 post、get

url：请求资源地址

2.setRequestHeader(header,value)

设置请求头信息

Header：头信息

Value：值

3.send(content)

发送请求

Content：所传递的参数只有在post请求时才需要将参数放在这里

相关属性:

l readyState

Ajax对象的状态码 ,这个状态码会随时改变

0：表示对象已建立，但未初始化

1：表示对象已初始化，但未发送

2：已调用send方法进行请求

3：正在接收数据（接收到一部分）

4：接收完成

2. onreadystatechange

当ajax对象的状态码发生改变时，所触发的回调函数

3. status

http响应状态码

4.statusText

http响应的文本

5. responseText

http响应内容的文本

6. responseXML

http响应内容的xml数据

ajax代码1-2,demo01.html:

<html>

<script lanuage="juavascript" src="public.js"></script>
<script>
	var xmlHttp = createXMLHttp();
	xmlHttp.open('get','demo01.php');
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4){
			alert(xmlHttp.responseText);
		}
	};
	
	xmlHttp.send(null);
</script>
</html>

代码1-3,demo01.php: