Ajax

最新推荐文章于 2024-07-15 22:52:27 发布

_xw2018

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量917

点赞数

本文链接：https://blog.csdn.net/sm20170867238/article/details/91163712

版权

Ajax是XMLHTTPequest对象和JavaScript、XML、CSS、DOM等技术的组合。Ajax可以像桌面程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面。
发送请求的四个步骤：
（1）初始化XMLHTTPRequest对象。
（2）为XMLHTTPRequest对象指定一个回调函数，用于对返回结果进行处理。
（3）创建一个与服务器的连接。
（4）向服务器发送请求。

XMLHTTPRequest对象的常用方法：
①open()方法
作用：设置进行异步请求目标的URL、请求方法以及其他参数信息。

语法：
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]);

说明：
method：用于指定请求的类型。一般为GET或POST
URL：用于指定请求地址，可以使用绝对地址或相对地址，并且可以传递查询字符串
asyncFlag：可选参数，用于指定请求方式，异步为true，同步为false。默认为true。
userName：可选参数，用于指定请求用户名。
password：可选参数，用于指定请求密码。

②send()方法
作用：向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。

语法：
send(content);

说明：
content：用于指定发送的数据，可以是DOM对象的实例，输入流或字符串。没有参数需要传递可以设置为null。

③setRequestHeader()方法
作用：用于为请求的HTTP头设置值。

语法：
setRequestHeader("header","value");

说明：
header：指定HTTP头
value：为指定HTTP头设置值

注意：该方法必须在调用open()方法之后才能使用

④abort()方法
作用：停止或放弃当前异步请求。

⑤getResponseHeader()方法
作用：用于以字符串形式返回指定的HTTP头信息。

语法：
getResponseHeader("headerLabel");

说明：
headerLabel：用于指定HTTP头，包括Server、Content-Type和Date等。

⑥getAllResponseHeaders()方法
作用：以字符串形式返回完整的HTTP头信息。

XMLHTTPRequest对象的常用属性：

①onreadystatechange属性
作用：用于指定状态改变时所触发的事件处理器。通常会调用JavaScript函数。

②readyState属性
作用：获取请求的状态。

五个属性值的意义：
0：未初始化
1：正在加载
2：已加载
3：交互中
4：完成

③responseText属性
作用：获取服务器的响应，表示为字符串。

④responseXML属性
作用：获取服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。

⑤status属性
作用：返回服务器的HTTP状态码。

状态码：
200：表示成功
202：表示请求被接收，但尚未成功
400：错误的请求
404：文件未找到
500：内部服务器错误

⑥statusText属性
作用：返回HTTP状态码对应的文本。

向服务器发送请求

①初始化XMLHTTPRequest对象

IE浏览器（两种）：
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

非IE浏览器：
var xmlhttp = new XMLHTTPRequest();

②为XMLHTTPRequest对象指定一个回调函数

xmlhttp.onreadystatechange = function(){ getResult();};

③创建一个与服务器的连接（两种方式）

xmlhttp.open('GET',url,true);
xmlhttp.open('POST',url,true);

④向服务器发送请求

向服务器发送GET请求：
xmlhttp.send(null);

向服务器发送POST请求
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //必须加在send()方法之前
xmlhttp.send("user=admin&pwd=123456");

处理服务器响应

回调函数：
function getResult(){
   if(xmlhttp.readyState==4 && xmlhttp.status==200){ //判断请求状态
       alert(xmlhttp.responseText); //根据需要处理返回结果
   }
   else{
       alert("请求的页面出错");
   }
}

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<title>ajax演示</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div>使用ajax修改内容</div>
		<button onclick="loadXMLDoc()">修改内容</button>
	</body>
	<script type="text/javascript">
		function loadXMLDoc(){
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp=new XMLHttpRequest();
			}
			else{
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
					var Div=document.getElementsByTagName('div')[0];
					Div.innerText=xmlhttp.responseText;
				}
			}
			xmlhttp.open('GET',"1.txt",true);
			xmlhttp.send();
		}
	</script>
</html>

_xw2018

关注

0
点赞
踩
4

收藏

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

Ajax是XMLHTTPequest对象和JavaScript、XML、CSS、DOM等技术的组合。Ajax可以像桌面程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面。发送请求的四个步骤：（1）初始化XMLHTTPRequest对象。（2）为XMLHTTPRequest对象指定一个回调函数，用于对返回结果进行处理。（3）创建一个与服务器的连接。（4）向服务器发送请求。XML...
复制链接

扫一扫