[第一弹]ajax简单应用

前端之家收集整理的这篇文章主要介绍了[第一弹]ajax简单应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajax(全称:Asynchronous JavaScript And XML )

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

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



Ajax工作原理图:



创建XMLHttpRequest对象有两种情况:

1.在IE浏览器下:

varxmlHttp = 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:请求方式postget

url:请求资源地址

2.setRequestHeader(header,value)

设置请求头信息

Header:头信息

Value:值

3.send(content)

发送请求

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

相关属性:

lreadyState

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:

<?PHP

echo 'Hello Ajax !';

?>


结果如下:

原文链接:https://www.f2er.com/ajax/164319.html

猜你在找的Ajax相关文章