zoukankan      html  css  js  c++  java

  • 关于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
  • 相关阅读:
    关于feign调用请求头丢失分析
    并发下编写SQL的注意事项
    Sentinel降级规则整理
    Mybatis-Plus使用整理
    Docker各种零散命令整理
    set集合怎么保证不重复的
    idea启动项目ava heap space
    网络穿透工具--钉钉HTTP穿透
    Log4j基本使用
    ide中普通java程序打包
  • 原文地址：https://www.cnblogs.com/Decmber/p/4780597.html
Copyright © 2011-2022 走看看