ajax入门简介

• ajax的实现原理

1. ajax的定义是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以在不刷新页面的情况下提交请求与服务器进行交互动作。
2. ajax的主要对象就是通过XmlHttpRequest这个对象与服务器进行异步请求。随后通过获得的数据进行相应的操作，例如：通过javascript修改页面数据、样式。
3. XmlHttpRequest有多个属性，了解这些属性才能知道原理。
   1. onreadystatechange  每次状态改变所触发事件的事件处理程序。

   2. responseText     从服务器进程返回数据的字符串形式。

   3. responseXML    从服务器进程返回的DOM兼容的文档数据对象。

   4. status           从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

   5. status Text       伴随状态码的字符串信息

   6. readyState       对象状态值 

• 　例子如下所示

  //1.创建ajax引擎对象
  var xmlHttp = new XMLHttpRequest();
  //2.绑定监听----监听服务器返回的数据
  xmlHttp.onreadystatechange = function(){
       if(xmlHttp.readyState==4&xmlHttp.status==200){           //确定引擎对象的两个参数的值为正常
            var res_str = xmlHttp.responseText;          //5.接收数据，设定返回的是字符串类型
            /*具体的操作*/
       }
  }
  //3.绑定发送地址及相关方法
  xmlHttp.open("GET","/WEB20/ajax",true);           //true为是否异步
  //4.发送到服务器端
  xmlHttp.send();
  
  //jquery封装的ajax
  其中ajax较为常用的有3种，分别是

  jQuery.post(url, [data], [callback], [type]);

  //示例

  $.post(

       "web22/ajax",          //地址绝对不能缺少

       {"name":"lisi"},        //发送给服务器的数据，键值对格式

       function(data){

            //operation--data

            data为服务器返回的数据

       },

       "json"         //规定返回的数据按照json格式解析

  );

   

  示例

  $.ajax({

              url:"/WEB22/ajaxServlet2",       //地址，ajax用于跨域请求时，需要用到jsonp技术

              async:true,          //是否异步

              type:"POST",          //提交方式

              data:{"name":"lucy","age":18},     //发送的数据

              success:function(data){          //成功响应时用的方法

                  alert(data.name);

              },

              error:function(){             //请求失败所用的方法

                  alert("请求失败");

              },

              dataType:"json"          //返回的数据解析的格式

          });