ajax的重新学习，以及axios

    首先在这次学习之前已经又过了简单的入门，并且在上学期vue的开发中对其中的ajax语法以及方法有所认识，但是还有很多别的框架不同种的写法，因此我需要掌握原生ajax的知识

 

一、对ajax的简单认识

        ajax是一种以现有标准为基础的新方法，能够与服务器交换数据并且更新页面局部的技术，无需加载整个网页，

       ajax是一种异步的js和mxl，一种创建快速动态网页的技术

      xmlhttprequest是ajax的基础（xmlhttprequest是一个对象，用于与后台服务器交换数据）

      要使用XmlHttpRequest必须检查运行浏览器是否支持它（老板浏览器支持ActiveXObject）

      以下是检查并创建方法：

                        

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  如果需要向服务器发送请求则使用对象的方法：
        open（method，url（服务器上文件的位置），true(异步)/false（同步）），sent（仅支持post请求类型）
  以下情况使用post：发送大量数据，无法使用缓存文件 指更新服务器上的文件，用户的私密输入；

   如果希望向服务器发送请求，并传输数据给服务器，需要在url添加信息：

   xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
  xmlhttp.send();
   *其中url所指向的文件可以是任何类型的，txt，xml又或者是服务器脚本类型：asp，php，jsp等
  如果要使用ajax的话，asyn必须设置为true，这样在执行到向服务器的请求等待（响应时），可以执行其他脚本，等响应完成后再对其处理

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

    xmlhttp.onreadystatechange=function()
     {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }
   xmlhttp.open("GET","test1.txt",true);
   xmlhttp.send();
   当asyn为false时不使用onreadystatechange事件
   把代码放到.send()语句后就行:

   xmlhttp.open("GET","test1.txt",true);
   xmlhttp.send();
 
     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;


    如需获得服务器的响应,有两种返回值:reponsetext(返回字符串),reponsexml(返回xml类型的文件)

请求 books.xml 文件，并解析响应：

function loadXMLDoc()
{
var xmlhttp;  //提前定义好所需变量
var txt,x,i;  //提前定义好所需变量
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//over创建xmlhttprequest对象
xmlhttp.onreadystatechange=function()   
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //判断服务器状态   readystate存有xmlhttprequest的状态,4代表请求完成并响应成功;status=200代表ok,404代表未找到页面
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}

//over异步响应方法

xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();     //注意一切方法定义声明好后再写向服务器请求的语句
}

  ps:::解读以上程序:放请求发向服务器时,我们要执行一些基于响应的任务

        每当readystate发生改变时就执行一遍onreadstatechange事件

       onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。 0:请求未初始化1:服务器已建立连接,2:请求已接受3:请求处理中

function loadxmldoc(url,fun) {   

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = fun;

xmlhttp.open("GET",url,true);

xmlhttp.sent();  

   }

  function myFunction() 

   {     loadxmldoc("/ajax/test1.txt",function()

{  if(xmlhttp.readystate ==4 && xmlhttp.status ==200)

  {

    documenti.queryselector('#abc').innerhtml = xmlhttp.responsetext;

}

});