JavaScript--AJAX

海螺炒面

已于 2022-08-26 17:19:17 修改

阅读量327

点赞数 1

分类专栏：笔记文章标签： ajax javascript safari

于 2022-08-25 14:19:49 首次发布

本文链接：https://blog.csdn.net/hailuochaofan/article/details/126522632

版权

笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

AJAV异步–海螺心得

文章目录

AJAV异步--海螺心得
一、responseText
二、responseXML
三、document.getElementById().innerHTML
四、setRequestHeader
五、xmlhttp.readyState的值及解释：
六、xmlhttp.status的值及解释：

一、responseText

responseText 获得字符串形式的响应数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	//window.XMLHttpRequest
	//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
	//如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
	xmlhttp.onreadystatechange=function()
	//onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
	{
	    //readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
		//0: 请求未初始化
		//1: 服务器连接已建立
		//2: 请求已接收
		//3: 请求处理中
		//4: 请求已完成，且响应已就绪
		//status,200: "OK";404: 未找到页面
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		    //innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容;
		    //可以通过 document.getElementById(‘zlx’).innerHTML 来获取id为zlx的对象的内嵌内容;
		    //可以通过document.getElementById(‘zlx’).innerHTML=‘小熊吃西瓜’; 向id为zlx的对象插入小熊吃西瓜。
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	//open(method,url,async).
	//method：请求的类型,GET 或 POST;url：文件在服务器上的位置;async：true（异步）或 false（同步）
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	//将请求发送到服务器;string：仅用于 POST 请求
	xmlhttp.send();
}
</script>
</head>
<body>
//div 部分用于显示来自服务器的信息。当按钮被点击时(onclick)，它负责调用名为 loadXMLDoc() 的函数
<div id="zlx"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

二、responseXML

responseXML 获得 XML 形式的响应数据。
复制代码代码如下:

//使用responseXML的方式来接受XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message");
//获取message节点中的文本内容
//message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//对于文本节点来说，可以通过nodeValue的方式返回文本
var responseMessage = textNode.nodeValue;
//把值responseMessage显示在div上
var divNode=document.getElementById("result");
divNode.innerHTML=responseMessage;
} else {
alert("XML数据格式错误，原始文本内容为：" + xmlhttp.responseText);
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      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>

三、document.getElementById().innerHTML

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容;

<div id="zlx"><h2>使用 AJAX 修改该文本内容</h2></div>

可以通过 document.getElementById(‘zlx’).innerHTML 来获取id为zlx的对象的内嵌内容;

可以通过document.getElementById(‘zlx’).innerHTML=‘小熊吃西瓜’; 向id为zlx的对象插入小熊吃西瓜。

四、setRequestHeader

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
setRequestHeader(header,value)。
向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
  //setRequestHeader(header,value)
  //向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>