关于ajax

放肆的年华 提交于 2020-03-17 08:54:26

 

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!