关于ajax | 易学教程

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

XHR对象的readyState属性：

0：未初始化。尚未调用open（）方法；

1：启动。已经调用open（）方法，但尚未调用send（）方法；

2：发送，已经调用send（）方法，但尚未接到相应；

3：接收，已经接收到部分响应数据；

4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了。

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建XMLHttpRequest对象的语法：

var myRequest=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var myRequest=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");
  }

向服务器发送请求：

xmlhttp.open("GET","test.txt",true)；
xmlhttp.send();

相关方法：open(method,url,async);method:请求类型，POST或GET；URL：文件在服务器上的地址；async：true(异步)，false(同步)；

　　　　　send(string)将服务发送到服务器，string：仅用于POST请求。

POST VS GET

GET简单快速；POST能更新服务器上的文件或数据库（无法使用缓存文件的时候需要使用POST），向服务器发送大量数据（POST没有数据量限制）；发送包含未知字符的用户输入时，POST比GET更安全可靠稳定。

GET请求

xmlHttp.open("GET","test.xml",true);
xmlHttp.send();以上可能得到的是缓存的信息，可以向URL添加唯一的id：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();或者：通过get发送消息则需要向URL添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

post请求

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();如果需要发送数据，则需要使用setRequestHeader()来添加HTTP头,然后再send()方法中规定希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)：向请求添加http头，header规定头的名称，value规定头的值;

URL-服务器上的文件

open()方法中的URL是服务器上文件的地址；该文件可以是任何类型的文件；

异步-true/false

ajax指的是异步JavaScript和xml；

XMLHttpRequest对象如果要用于ajax的话，open()方法的async参数必须设置为true;

通过ajaxJavaScript无需等待服务器的响应：在等待服务器响应时执行其他脚本，当相应就绪后对相应进行处理；

async=true

当使用async=true时，规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：

xmlhtpp.onreadystatechange=function(){
    if(xmlhttpreadystate==4 && xmlhttp.status==200){
          document.getElementById("#selector").innerHTML=xmlhttp.responseText;  
    }
}
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();

async=false

一般不使用false;对于一些小型请求使用false时，不要编写onreadystatechange函数，把代码放到send语句后面：

xmlhttp.open("GET","test.xml","false");
xmlhttp.send();
document.getElementById("#selector").innerHTML=xmlhttp.responseText;

获取服务器响应：

responseText；responseXML

//对获取的xml对象进行解析：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementByTagName("Name");
for(var i=0;i<x.length;i++){
  txt+=x[i].childNodes[0].nodeValue+"<br/>";  
}
document.getElementById("#selector").innerHTML=txt;

当请求被发送到服务器时，需要执行一些基本响应的任务；每当readyState改变时，就会触发onreadystatechange事件。readystate属性存有XMLHttpRequest的状态信息；

onreadystatechange ：存储函数（或函数名），每当readyState属性改变时就会被调用；

readyState ：存有XMLHttpRequest的状态：0请求未初始化，1服务器建立连接，2请求已经接收，3请求处理中，4请求完成且响应就绪；

statue:200:"OK";404:"未找到页面"

使用callBack函数：

callback函数是一种以参数的形式传递给另一个函数的函数；如果网站上存在多个ajax任务，那么应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个ajax任务调用该函数：

该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

以下例子将会与web服务器进行通信：

<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>请在下面的输入框中键入字母（A - Z）：</h3>
<form action=""> 
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建议：<span id="txtHint"></span></p> 

</body>
</html>

解释：

　　第一个判断语句表示输入框为空时清空钙元素内容并退出函数；

　　第二个if判断根据浏览器兼容创建XMLHttpRequest对象；

　　onreadystatechange函数表示当服务器就绪时执行函数里面的if判断表示当成功获取数据时将获取的数据显示出来；

　　open，send表示向服务器请求文件，此处URL添加了参数q，发送并请求文件。

xmlhttp.getAllResponseHeaders();//获得请求head
xmlhttp.responseText；//或的请求文件
xmlhttp.statusText;//获得请求状态
xmlhttp.responseXML.documentElement.getElementsByTagName("selector")//获得并解析请求

相关文章：https://segmentfault.com/a/1190000004100271

来源：https://www.cnblogs.com/Decmber/p/4780597.html

标签

ajax

xmlhttprequest

xmlhttp