欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

XMLHttpRequest对象

程序员文章站 2022-03-28 15:37:17
AJAX简介​AJAX = 异步 JavaScript 和 XML; 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行数据交换,可以使网页实现异步更新(不重新加载整个网页)创建 XMLHttpRequest 对象​语法: variable = new XMLHttpRequest( );​老版本:variable = new ActiveXObject(“Microsoft.XMLHTTP”);//兼容浏览器var xmlhttp;if (window.XMLHttpReq...

AJAX

简介

​ AJAX = 异步 JavaScript 和 XML; 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行数据交换,可以使网页实现异步更新(不重新加载整个网页)

XMLHttpRequest对象

创建 XMLHttpRequest 对象

​ 语法: variable = new XMLHttpRequest( );

​ 老版本:variable = new ActiveXObject(“Microsoft.XMLHTTP”);

//兼容浏览器
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","ajax_info.txt",true);
//ajax_info.txt 是文件在服务器上的地址(url)
xmlhttp.send();

open方法

​ open(method,url,async) : |method:请求的类型;GET 或 POST

| url:文件在服务器上的位置 | async:true(异步)或 false(同步)

send方法

​ 将请求发送到服务器 ( 仅用于 POST 请求

GET类型

一个简单的get请求

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("GET","/try/ajax/demo_get.php",true);
	xmlhttp.send();
}


/*这里是html代码
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>*/
//点击按钮发送请求  responseText是返回的数据 可以显示在id为myDiv的盒子里

通过get方法发送信息

function loadXMLDoc()
{
	var xmlhttp;
  	xml=new XMLHttpRequest();
  	xmlhttp.onreadystatechange=function()
  	{
    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
      		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    	}
  	}
    //向URL添加信息
  	xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
  	xmlhttp.send();
}
/*html代码
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>*/

//responseText:你好,Henry Ford,今天过得怎么样? 会显示在myDiv里 url里添加了fname=Henry&lname=Ford信息,发送给了服务器=>显示在页面上

POST类型

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
//其他与GET类型相同

如果需要像 HTML 表单那样 POST 数据,要使用 setRequestHeader() 来添加 HTTP 头

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var form = document.getElementById("user-info");     
xhr.send(serialize(form));

//serialize()表单的序列化(小红书14章) => 将 ID为"user-info"的表单中的数据序列化之后发送给服务器。

如果不设置 Content-Type 头部信息,那么发送给服务器的数据就不会出现在$_POST 超级全局变量中

HTTP头部信息

​ 每个 HTTP请求和响应都会带有相应的头部信息,有的对开发人员有用,有的没有什么用。 XHR 对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。

​ 使用 setRequestHeader( )方法可以设置自定义的请求头部信息。接受两个参数:头部字段的名称和头部字段的值。要成功发送请求头部信息,必须在调用 open()方法之后且调用 send()方法之前调用 setRequestHeader()

Async

​ XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true;通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

响应

​ *在收到响应后,响应的数据会自动填充 XHR对象的属性。

​ |responseText:作为响应主体被返回的文本。

​ |responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保 存包含着响应数据的 XML DOM文档。

​ |status:响应的 HTTP状态。

​ |statusText:HTTP状态的说明。

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText); //响应是有效的
}else {     
    alert("Request was unsuccessful: " + xhr.status); 
} 
 

​ *多数情况下,要发送异步请求,此时,可以检测XHR对象的 readyState 属性该属性表示请求 /响应过程的当前活动阶段。

​ |0:未初始化。尚未调用 open()方法

​ |1:启动。已经调用 open()方法,但尚未调用 send()方法

​ |2:发送。已经调用 send()方法,但尚未接收到响应

​ |3:接收。已经接收到部分响应数据

​ |4:完成。已经接收到全部响应数据,可以在客户端使用

xhr.onreadystatechange = function(){     
    if (xhr.readyState == 4){         
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){              			alert(xhr.responseText);         
        } else {              
            alert("Request was unsuccessful: " + xhr.status);         
        }     
    }
}; 

GET or POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

本文地址:https://blog.csdn.net/YogaLin_qwq/article/details/107570910

相关标签: javascript ajax