4.JavaScript的XMLHttpRequest使用

什么是XMLHttpRequest

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

XMLHttpRequest他是用http实现的通信

XMLHttpRequest的方法

方法	描述
`open("请求类型","URL")`	请求类型 GET 或 POST，url：文件位置
`send()`	将请求发送到服务器，用于 GET 请求
`send("数据内容")`	将请求发送到服务器，用于 POST 请求
`abort()`	取消当前请求
`getAllResponseHeaders()`	返回头部信息
`getResponseHeader()`	返回特定的头部信息
`setRequestHeader()`	向要发送的报头添加标签/值对

XMLHttpRequest的属性

方法	描述
`readyState`	0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
`responseText`	返回响应数据以字符串格式显示
`responseXML`	以 XML 数据返回响应数据
`status`	返回请求的状态号 200: “OK”，403: “Forbidden” ，404: “Not Found”
`statusText`	返回状态文本（比如 “OK” 或 “Not Found”）

请求

下面我用到的

方法	描述
`open("请求类型","URL")`	请求类型 GET 或 POST，url：文件位置
`send()`	将请求发送到服务器，用于 GET 请求
`send(string)`	将请求发送到服务器，用于 POST 请求
`setRequestHeader()`	向要发送的报头添加键名/值

创建XMLHttpRequest对象

1	var a = new XMLHttpRequest();

创建请求行

创建请求行用的方法是open()

第一个猜数请求类型 GET 或 POST
第二个猜数url：文件位置

GET请求

如果要添加参数

1	a.open("GET","a.php?username=admin&password=admin");

POST请求

1	a.open("POST","a.php");

添加请求头

向要发送的报头用到setRequestHeader()方法
里面可以随便改

1	a.setRequestHeader("头键名","头值");

实咧

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
<script type="text/javascript">

	
	//创建XMLHttpRequest对象
	var a = new XMLHttpRequest();
	
	//创建请求行
	a.open("POST","a.php");
	
	//添加请求头
	a.setRequestHeader("aaaaa","bbbbbb");
	//将请求发送到服务器
	a.send();
</script>
</body>
</html>

将请求发送到服务器

1 2	a.send(); //里面没有参数发送的是GET请求 a.send("username=admin&password=admin"); //这个就是POST的数据内容

实咧测试

代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">


	//创建XMLHttpRequest对象
	var a = new XMLHttpRequest();
	
	//创建请求行
	a.open("POST","a.php");
	
	//将请求发送到服务器
	a.send();
</script>
</body>
</html>

可以看见里面有username=admin&password=admin

响应接受

会用到responseText属性他是返回响应数据以字符串格式显示

方法	描述
`readyState`	0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪

不用属性接受返回的值

如果不用任何东西他会在响应的数据内容里面，不会在页面上
下面就看一下他会在数据内容里面
实咧
a.php文件代码

1
2
3

<?php
echo "你好啊";
?>

a.html文件代码

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

	
	//创建XMLHttpRequest对象
	var a = new XMLHttpRequest();
	
	//创建请求行
	a.open("GET","a.php");
	
	//将请求发送到服务器
	a.send();
</script>
</body>
</html>

结果

接受他返回的值

会用到responseText属性他是返回响应数据以字符串格式显示
实咧

a.php文件代码

1
2
3

<?php
	echo "你好啊";
?>

a.html文件代码
下面用到onload事件当页面加载完蛋时候触发

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>

<script type="text/javascript">

	
	//创建XMLHttpRequest对象
	var a = new XMLHttpRequest();
	
	//创建请求行
	a.open("GET","a.php");
	
	//页面加载完触发这个
	a.onload=function(){
		//responseText属性他是返回响应数据以字符串格式显示
		alert(a.responseText);
	}
	
	//将请求发送到服务器
	a.send();
</script>
</body>
</html>

结果

属性的使用

方法	描述
`readyState`	0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
`open("请求类型","URL")`	请求类型 GET 或 POST，url：文件位置
`send()`	将请求发送到服务器，用于 GET 请求
`send(string)`	将请求发送到服务器，用于 POST 请求