AJAX详解，涉及到XML中部分，适合初学者

最新推荐文章于 2023-03-30 09:44:50 发布

Fiee Dust Heart

最新推荐文章于 2023-03-30 09:44:50 发布

阅读量248

点赞数

分类专栏： ajax 文章标签： javascript ajax xmlhttprequest xml html

本文链接：https://blog.csdn.net/qq_45062586/article/details/104660534

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AJAX语法

AJAX简介

用于创建快速动态网页的技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新
AJAX = 异步 JavaScript 和 XML。
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)

摘自菜鸟教程

一个简单实例

<head>
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();  //对IE7以下就不做适配了
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

注：想要了解清楚代码意思，就需要先了解XMLHttpRequest 对象

步骤

1.创建 XMLHttpRequest 对象，在后台与服务器交换数据
- 语法：
  xmlhttp=new XMLHttpRequest();
2.向服务器发送请求
- 语法：
  xmlhttp.open(“GET”,“ajax_info.txt”,true);
  xmlhttp.send();
- 请求：
  GET请求
  POST请求

方法	参数描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求	method：请求的类型 GET 或 POST url：文件在服务器上的位置 async： true（异步）或 false（同步）
send(string) 将请求发送到服务器	string：仅用于 POST 请求

情况一：GET请求

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

情况二：POST请求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

解析open() 的第三个参数-Async---->异步和同步

1.使用 Async=true（异步）

脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
影响：onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。

2.使用 Async=false（同步）

在请求失败时是否执行其余的代码无关紧要时使用。
影响：可以省去额外的 onreadystatechange 代码。

$\color{red}XMLHttpRequest 对象$

$\color{gray}属性（用“.”连接）$

属性	属性值	状态名称	描述
①readyState：HTTP 请求的状态	0	Uninitialized初始化状态。	XMLHttpRequest 对象已创建或已被 abort() 方法重置。
	1	Open	open() 方法已调用。但是 send() 方法未调用。请求还没有被发送。
	2	Sent	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
	3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
	4	Loaded	HTTP 响应已经完全接收。
②responseText：服务器接收到的响应体（不包括头部）	<3和没接收到数据		就是一个空字符串
	3		返回目前已经接收的响应部分
	4		保存了完整的响应体
③responseXML：指定请求的 HTTP 的状态代码。			解析为 XML 并作为 Document 对象返回
④status：服务器返回的 HTTP 状态代码。（数字）	200		表示成功
	404		表示 “Not Found” 错误
	当 readyState < 3 时读取会导致异常
⑤statusText：服务器返回的 HTTP 状态代码。(名称)	OK		表示成功
	Not Found		未找到错误
	当 readyState < 3 时读取会导致异常	nbsp;	nbsp;
⑥onreadystatechange:是一个事件句柄	它的值 (state_Change) 是一个函数的名称		当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄注意：当 readyState = 3 时，它也可能调用多次

属性比较：

属性②responseText和属性③responseXML
- 前者是返回字符串形式的响应数据。
- 后者是返回 XML 形式的响应数据。

举例1:(看完后面的xml内容在回过来看这里就能明白)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
            //返回字符串形式的响应数据。
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;     
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

举例2:(看完后面的xml内容在回过来看这里就能明白)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();
	}
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      //返回 XML 形式的响应数据。
      xmlDoc=xmlhttp.responseXML;
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++){
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
</body>
</html>

属性④status和属性⑤statusText
- 前者是数字为值
- 后者是英文字母为值
属性①readyState和属性④status以及⑥onreadystatechange
- 每当 readyState 改变时，就会触发 onreadystatechange 事件。
- readyState 属性存有 XMLHttpRequest 的状态信息status
- 在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。

由此引出以下代码

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注：此处不介绍回调函数

$\color{gray}方法（用“.”连接）$

6个方法

abort()
getAllResponseHeaders()
getResponseHeader()
open()
setRequestHeader()
send()

1.XMLHttpRequest.open()

作用：初始化 HTTP 请求参数，以供 send() 方法稍后使用

语法：open(method, url, async, username, password)

参数：

method 参数
- 用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD
url 参数
- 请求的主体。要求这个 URL 与包含脚本的文本具有相同的主机名和端口
async 参数
- 是否异步执行：true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄； false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收
username 和 password 参数
- 为 url 所需的授权提供认证资格指定了，它们会覆盖 url 自己指定的任何资格

说明：
1.readyState = 0 ,（XMLHttpRequest 对象刚创建或者 abort() 方法调用后），调用这个方法是安全的。
2.readyState = 1，删除之前指定的所有请求头部，以及之前接收的所有响应头部，并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。
3.readyState = 4,（已经接收响应时）,调用这个方法是安全的。
4.其他状态调用，open() 方法的行为是为指定的。

除了保存供 send() 方法使用的请求参数，以及重置 XMLHttpRequest 对象以便复用，open() 方法没有其他的行为。要特别注意，当这个方法调用的时候，实现通常不会打开一个到 Web 服务器的网络连接。

2.XMLHttpRequest.setRequestHeader()

作用：1.指定了一个 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。
2.向一个打开但未发送的请求设置或添加一个 HTTP 请求

语法：setRequestHeader(name, value)

参数：

name 参数
- 设置头部的名称，如Content-type
  不应该包括空白、冒号或换行
value 参数
- 设置头部的值，如application/x-www-form-urlencoded
  不应该包括换行

说明：
1.readyState = 1 才能调用，如:在调用了 open() 之后，但在调用 send() 之前。
2.如果带有指定名称的头部已经被指定了，这个头部的新值就是：之前指定的值，加上逗号、空白以及这个调用指定的值。
3.如果 open() 调用指定了认证资格，XMLHttpRequest 自动发送一个适当的 Authorization 请求头部。但是，你可以使用 setRequestHeader() 来添加这个头部。类似地，如果 Web 服务器已经保存了和传递给 open() 的 URL 相关联的 cookie，适当的 Cookie 或 Cookie2 头部也自动地包含到请求中。可以通过调用 setRequestHeader() 来把这些 cookie 添加到头部。XMLHttpRequest 也可以为 User-Agent 头部提供一个默认值。如果它这么做，你为该头部指定的任何值都会添加到这个默认值后面。

3.XMLHttpRequest.send()

作用：发送一个 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

语法：send(body)

参数：

body参数
- 指定请求体
  情况1：如果调用 open() 指定的 HTTP 方法是 POST 或 PUT，就指定请求体，作为一个字符串或者 Document 对象
  情况2：如果调用 open() 指定的 HTTP 方法是其他，该参数不写

说明：
1.readyState = 1,它会发送一个 HTTP 请求，一旦请求发布，则 send() 把设置为readyState = 2，并触发 onreadystatechange 事件句柄
2.readyState != 1，即没有调用 open() ，这时send() 抛出一个异常。
3.如果之前调用的 open() 参数 async 为 false（同步），这个方法会阻塞并不会返回，直到 readyState = 4 并且服务器的响应被完全接收。
4.如果之前调用的 open() 参数 async 为 true(异步)或省略，send() 立即返回，服务器响应将在一个后台线程中处理。
5.
如果服务器响应带有一个 HTTP 重定向，send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收，send() 或后台线程设置 readyState = 3 并触发 onreadystatechange 事件句柄。如果响应较长，send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send() 或后台线程设置 readyState = 4，并最后一次触发事件句柄。

4.XMLHttpRequest.abort()

作用：把 XMLHttpRequest 对象重置为 readyState = 0 的状态。并取消当前响应，关闭连接并且结束任何未决的网络活动

语法：暂无（以后补充）

参数：暂无（以后补充）

说明：
1.如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

5.XMLHttpRequest.getAllResponseHeaders()

作用：把 HTTP 响应头部作为未解析的字符串返回。

语法：暂无（以后补充）

参数：暂无（以后补充）

说明：
1.如果 readyState < 3，返回 null
2.如果 readyState 为其他，返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 “\r\n” 隔开。

6.XMLHttpRequest.getResponseHeader()

作用：返回指定的 HTTP 响应头部的值。

语法：暂无（以后补充）

参数：暂无（以后补充）参数是要返回的 HTTP 响应头部的名称

说明：
1.如果没有接收到这个头部或者 readyState < 3 则为空字符串。
2.如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

几个实用代码（略复杂）

<html>
<head>
<script type="text/javascript">

var xmlhttp;

function loadXMLDoc(url){         //参数是切换文本的路径
  xmlhttp=null;

  if (window.XMLHttpRequest){     //IE7以下版本的兼容不在此考虑
      xmlhttp=new XMLHttpRequest();
  }

  if (xmlhttp!=null){
      //值是函数名（这句话调用事件句柄）
      xmlhttp.onreadystatechange=state_Change;  
      xmlhttp.open("GET",url,true); //GET方法,true是异步
      xmlhttp.send(null);
  }else{
      alert("Your browser does not support XMLHTTP.");
  }

}

function state_Change(){
  if (xmlhttp.readyState==4){       // 4 = "loaded"
    if (xmlhttp.status==200){       // 200 = "OK"
      <!-- 当 async=true 时，必须规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数（这个例子放在在body体里，由id=T1的button点击事件触发）： -->
      document.getElementById('T1').innerHTML=xmlhttp.responseText;
    }else{
      alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}
</script>
</head>

<body onload="loadXMLDoc('./text/a.txt')">

<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('./text/b.txt')">Click</button>
</body>

</html>

注：
./text/a.txt是原本网页上显示的文字内容的路径
./test/b.txt是点击按钮后显示的文字内容的路径

还有ASP和PHP、数据库的内容我还没学到o(╥﹏╥)o

Fiee Dust Heart

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX详解，涉及到XML中部分，适合初学者

AJAX语法AJAX简介用于创建快速动态网页的技术，可以在不重新加载整个网页的情况下，对网页的某部分进行更新AJAX = 异步 JavaScript 和 XML。XMLHttpRequest 对象 (异步的与服务器交换数据)JavaScript/DOM (信息显示/交互)CSS (给数据定义样式)XML (作为转换数据的格式)一个简单实例<head>&l...
复制链接

扫一扫