Ajax技术

最新推荐文章于 2024-02-17 13:45:00 发布

xiaoshidi123456

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量722

点赞数 3

文章标签： ajax

本文链接：https://blog.csdn.net/xiaoshidi123456/article/details/80949752

版权

        Ajax，并不是一项新的技术，它产生的目的是用于页面的局部刷新，因为如果页面只是简单的修改了一点点的局部内容，

服务器端都将整个页面数据刷新，并重新生成代码，那么程序的性能一定会有所下降，而采用Ajax技术，实现局部内容变更，那么

性能一定比前者高的多。

      Ajax是一门综合性的技术，，其主要应用包含了HTML，javaScript，XML，DOM，XMLHttpRequest等页面技术，其中最重要的

技术就是XMLHttpRequest对象。

       在Ajax中主要通过XMLHttpRequest对象处理发送请求和回应的，而要使用此对戏那个则必须使用javaScript，创建语句如下：

<script language="JavaScript">
var xmlHttp;                    //Ajax核心对象名
function createXMLHttp(){       //开始创建对象
if(window.XMLHttpRequest){      //判断当前使用的浏览器类型
xmlHttp=new XMLHttpRequest();   //表示使用FireFox内核的浏览器
}else{                          //表示使用的是IE内核的浏览器
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

XMLHttpRequest对象的属性
属性	描述
onreadystatechange	指定当readState状态改变时使用的操作，一般用于指定回调函数
readState	返回当前请求的状态，只读
responseBody	将回应信息正文以unsigned byte数组形式返回，只读
responseStream	以Ado Stream对象的形式返回响应信息，只读
responseText	接受以普通文本返回的数据，只读
responseXML	接受以XML返回的数据，只读
status	返回当前请求的状态码，只读
statusText	返回当前请求的响应行状态，只读

XMLHttpRequest对象的方法
方法	描述
abort（）	取消当前发出的请求
getAllResponseHeaders（）	获得所有的HTTP头消息
getResponseHeader（）	获得指定的HTTP头消息
open（）	创建一个HTTP请求，并指定请求模式，如GET或POST
send（）	将创建的请求发送到服务器，并接受返回信息
setResponseHeader（）	设置指定的消息头

XMLHttpRequest对象的open（）和send（）方法在回调函数出现较多，一般会用open（）方法设置一个提交路径，并通过地址重写方式设置一些请求参数，真正发出请求的操作是send（）方法完成的，下面通过具体的例子来进一步了解吧：

返回数据的页面----content.html

nihao!!!

使用异步处理---ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	var xmlHttp;
	function createXMLHttp(){
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function showMsg(){
		createXMLHttp();
		xmlHttp.open("POST","content.html");
		xmlHttp.onreadystatechange=showMsgCallback;
		xmlHttp.send(null);
	}
	function showMsgCallback(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				var text=xmlHttp.responseText;
				document.getElementById("msg").innerHTML=text;
			}
		}
	}
</script>
<body>
	<input type="button" οnclick="showMsg()" value="调用AJAX显示内容">
	<span id="msg"></span>
</body>
</html>

运行结果

xiaoshidi123456

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术

Ajax，并不是一项新的技术，它产生的目的是用于页面的局部刷新，因为如果页面只是简单的修改了一点点的局部内容，服务器端都将整个页面数据刷新，并重新生成代码，那么程序的性能一定会有所下降，而采用Ajax技术，实现局部内容变更，那么性能一定比前者高的多。 Ajax是一门综合性的技术，，其主要应用包含了HTML，javaScript，XML，DOM，XMLHttpRequest...
复制链接

扫一扫