[AJAX] 001 AJAX核心操作

① ajax的主要作用

局部刷新:实现布局内容变更。如DLBBS中实现昵称的修改。

② 掌握XMLHttpRequest对象的作用、前提、创建和使用

作用:通过该对象处理发送异步请求和处理回应。
前提:要使用该对象必须满足
若使用IE,则版本必须大于IE5[在IE5+以ActiveX组件形式出现]
必须使用JS
必须在服务器上使用,也就是要将编写好的文件通过url的方式访问。
如果直接双击文件打开访问,则会提示网页上有错,文件被拒绝访问。

创建:

<script languange="text/javascript">
	var xmlHttp;
	function createXMLHttpRequest(){
		//判断浏览器类型
		if(window.XMLHttpRequest){
			//firefox
			xmlHttp = new XMLHttpRequst();
		}else{
			//IE
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
</script>

使用:通过操作XMLHttpRequest对象的属性和方法来使用XMLHttpRequest对象。

(1)重要的属性

1)onreadystatechange() 指定回调函数

回调函数作用:调用回调函数后,将响应返回的内容[text/xml等]通过innerHTML方式返回给用户。


以下属性只读

2)readState 返回当前请求的状态

0 请求未发出[调用open()函数之前]
1 请求已建立但未发出[调用send()函数之前]
2 请求已发出正在处理[可从响应得到内容头部]
3 请求已处理正在接收服务器信息[响应中有部分数据可用,但还未完成全部响应]
4 响应完成,可以访问并使用该服务器响应。

3)responseText 接受普通文本数据
4)responseXML 接受以XML文档形式返回的数据
5)status 返回当前请求的HTTP状态码

(2)重要的方法
abort() 取得当前所发出的请求
setRequestHeader()设置一个指定请求的HTTP头信息
getResponseHeader() 取得一个指定的HTTP头信息
getAllResponseHeaders() 取得所有的HTTP头信息
open() 创建一个HTTP请求,并指定请求模式[get/post]
send() 将创建的请求发送到服务器端,并接收回应信息


例子:
content.htm
hello_world!

ajax_recieve_content.htm

<html>
<head>
	<title>www.mldnjava.cn,MLDN高端Java培训</title>
	<script language="javascript">
		var xmlHttp ;

//1 创建XMLHttpRequest对象 function createXMLHttp(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest() ; } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ; } }
//2 被调函数 function showMsg(){ // 创建XMLHttp对象 createXMLHttp() ; //创建一个HTTP请求,并指定发送方式 xmlHttp.open("POST","content.htm") ; // 设置操作的回调函数 格式:调用函数名称+Callback xmlHttp.onreadystatechange = showMsgCallback ; //发送创建的请求并接收回应信息 null表示不发送参数 xmlHttp.send(null) ; } //3 回调函数 function showMsgCallback(){ // 回调操作函数 if(xmlHttp.readyState == 4){ // 调用完成 if(xmlHttp.status == 200){ // HTTP状态码操作正常 var text = xmlHttp.responseText ; document.getElementById("msg").innerHTML = text ; } } } </script> </head> <body> <input type="button" onClick="showMsg()" value="调用AJAX显示内容"> <span id="msg"></span> </body> </html>

函数执行过程:单击按钮后,会出发showMsg()这个js函数,然后这个函数先是调用createXMLHttp()实例化一个xmlHttp对象,然后通过这个对象来调用open方法创建HTTP请求和send方法发出HTTP请求,并指定回调函数showMsgCallback()。回调函数在调用时一旦检测到调用完成且成功返回的这个状态,就会把相关的信息通过innerHTML传回到页面显示。这就是ajax的执行过程。

将这两个文件放在服务器目录下通过url形式访问即可。
虽然是静态页面,但是还是要发布到服务器后才能正常访问。

问题:
ajax中如果不判断readstate和status

也就是没有这两个语句
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
则回调函数会被调用三次

这是为什么?

猜想:可能是因为判断readstate调用一次/判断status调用一次/调用操作又调用一次

原文地址:https://www.cnblogs.com/avivaye/p/3135590.html