Ajax(1) —— Ajax基础
2021-02-05 16:14
标签：版本 属性 解析 html 状态改变 eval 问题 相同 接收 Ajax即Asynchronous JavaScript and XML，是异步的JavaScript与XML。Ajax提供了基于服务器交换数据并实现局部更新网页的技术，在不重新加载整个网页的情况下，可以接受来自服务器请求到的数据，提高了浏览页面的效率和用户体验。 XMLHttpRequest是Ajax的对象，所有现代浏览器（IE7+、Firefox、Chrome、Safari、Opera）均支持XMLHttpRequest对象，而低版本的IE（IE5和IE6）使用ActiveXObject对象。XMLHttpRequest用于在后台与服务器交换数据。即可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 为了兼容所有浏览器的情况，包括低版本的IE，创建Ajax对象可以使用如下代码： XMLHttpRequest对象用于和服务器交换数据，将请求发送到服务器，主要使用open()和send()方法 open：创建一个新的http请求，并指定此请求的方法、URL以及验证信息 语法： 示例代码： send：发送请求到http服务器并接收回应： 语法： varBody：仅用于POST请求。 对比一下简单的GET方法发送信息与POST方法发送信息： 如果需要像 HTML 表单form中那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据： GET和POST使用场景： GET相对于POST传递数据更简单快捷，在不涉及信息安全的场景下可以使用； 然而，在如下情况下，请使用POST请求传递数据： XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)，在这个方法中，当Async为true时，表示执行Ajax后端请求时是使用异步请求的方式，这里需要在响应处使用onreadystatechange事件进行监听Ajax的状态： 其中Async参数为可选布尔型，指定此请求是否为异步方式，默认为true。如果为true，当状态改变时会调用onreadystatechange属性指定的回调函数。 如果需要获取来自服务器的响应，需要调用XMLHttpRequest对象的responseText或者responseXML属性。 属性 描述 responseText 获得字符串形式的响应数据 responseXML 获得XML形式的响应数据 responseText属性： 将响应信息作为字符串返回，因此你可以这样使用： responseXML属性： 如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性，比如请求books.xml文件，并解析响应： callback函数是一种以参数形式传递给另一个函数的函数。 在执行多个Ajax调用任务时，可以在XMLHttpRequest对象中创建一个标准的执行流程函数，每次Ajax请求都调用这个函数执行open、send一套流程。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）： 博文参考文档W3School Ajax部分内容：https://www.w3school.com.cn/ajax/index.asp Ajax(1) —— Ajax基础 标签：版本 属性 解析 html 状态改变 eval 问题 相同 接收 原文地址：https://www.cnblogs.com/yif0118/p/13124483.html1. Ajax介绍
2. Ajax基础
2.1.创建Ajax对象
function getAjax() {
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(ActiveXObject){
xhr = new ActiveXObject("Microsoft XMLHTTP");
}
return xhr;
}
2.2.XHR请求
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
var xhr = getAjax();
/**
* oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
* bstrMethod http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
* bstrUrl 请求的URL地址，可以为绝对地址也可以为相对地址。
* varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。
* 如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
*/
xhr.open("GET", "/getTime");
xhr.send();
XMLHttpRequest.send(varBody);
//GET方式
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
//POST方式
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xhr.open("POST", "/login");
//Ajax设置请求编码 -- 使用POST请求传递参数必须加上
//位置在send之前，open之后
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//使用POST发送数据，在send里面，写入单独传参的数据
xhr.send("username=" + username + "&password=" + password);
2.3.XHR异步监听
//Ajax的异步问题可以通过Ajax的状态来解决：Ajax执行的每一步都有它对应的一个状态 readyState
//0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
//1 (初始化) 对象已建立，尚未调用send方法
//2 (发送数据) send方法已调用，但是当前的状态及http头未知
//3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
//4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
//注意：一般我们只需要一个点：readyState==4时，状态已经拿到了
//Ajax对象中有一个监听器，它可以监听每一次状态的变化（onreadystatechange）
2.4.XHR响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i
";
}
document.getElementById("myDiv").innerHTML=txt;2.5.XHR callback函数
Let AJAX change this text