ajax使用说明

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

有了AJAX我们能异步加载数据，不用整个页面都刷新。可以得到数据并且对网页的局部进行数据更新，使得网站或者网页app的体验得到提升。

AJAX和Vue框架还挺像，vue使用起来非常的轻巧，使得网页层层叠叠的缺点得以改善，而是以更好的更贴近思维的结构出现，那就是vue使得我们的网页更有人情味。AJAX也是可以对局部数据进行更新，我们只需要在需要更新数据时请求相应的数据，之后再渲染到页面上就可以了，使得网站变得姿态万千。

AJAX工作原理

AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)——可以看出掌握AJAX还是很重要的
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

下面我们看具体使用：

1.创建的XMLHttpRequest 对象

var xmlhttp;//创建的XMLHttpRequest 对象 
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.向服务器发送请求

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

参数说明:

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

补充:

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

3.获得响应

有发送，我们就要接收来自服务器的数据。

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

4.现在我们来看一个完整的例子

我们现在来看完整的流程，其实整个流程还是非常简单的，你可以写个小的demo就能熟悉了。

function iAmAFunction()
{
  var xmlhttp;//用来XMLHttpRequest对象
  
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {//特别说明 这里的onreadystatechange是有特殊含义的
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//这里的两个判断参数代表了请求的状态 这句代表请求顺利的完成并且响应了
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;//我们请求到的数据xmlhttp.responseText
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}

特别说明:

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

所以我们必须要设置onreadystatechange 事件来获取数据，也要从这里处理异常。

5.更好的使用AJAX的一个小技巧

下边的代码是在vue上的写法，但是都能看懂

    loadXMLDoc: function(url, cfunc) {//专门为亲求流程处理写个函数
      if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
      } else {
        xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
      }
      xmlHttp.onreadystatechange = cfunc;
      xmlHttp.open("GET", url, true);
      xmlHttp.send();
    }
    getInfo: function() {
      var vueOb=this;//获取当前对象 以免在匿名函数内获取不到当前对象
      vueOb.$options.methods.loadXMLDoc(
        "http://xxxx.xxx/api...你请求的接口",
        function() {
          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var data = xmlHttp.responseText; //json字符串
            var obj = JSON.parse(data);//if括号里的根据自己的需要来写
            vueOb.dat=obj.data;
          }
        }
      );
    }

我们专门为请求处理的流程写个函数，将参数暴露出来，这样就比较方便使用了。

注:在使用AJAX中可能还会遇到跨域的问题，这里是解决方法的传送门:神奇的传送门

AJAX是基于现有的Internet标准

猜你喜欢