AJAX

AJAX : 异步的 JS和XML  ,  老的技术和新的思想
功能: 完成页面的局部刷新,不中断用户的体验


同步和异步的区别:
   1. 同步的是整个页面都刷新了
   2. 异步是只会局部刷新,类似与百度搜索,输入一个a,会异步从数据库加载出很多选项


1.js中有一个对象XMLHttprequest对象可以向服务器异步发送请求.


2.XML: 使用XML作为数据传递的格式  JSON: 新技术.


3.XMLHttpRequest: 
    1.属性: onreadstatechange  :
           当XMLHttpRequest状态(readyState : 0,1,2,3)改变的时候会触发
 
      status属性: 获得相应的状态码 202,404....
   
      responseText: 获得响应的文本数据 


      responseXML: 获得响应的XML数据 




    2.方法 open(请求方式,请求的路径,是否异步请求)  : 异步去向服务器发送请求.


       send(请求的参数);  : 发送请求


       setRequestHeader(头信息,头的值)  : 处理post请求方式的中文问题


     3.创建XMLHttpRequest 对象:
        IE:  将对象封装在一个ActiveXobject组件
        火狐 : 直接可以创建这个对象


AJAX的入门:
   编写步骤:
     创建异步对象,  设置对象状态改变触发函数,  设置向后台提交的路径,  发送请求
  
    三个页面, .JSP显示页面 ,通过link 引入 .js页面里面是异步函数事件 在open属性中写入                  servlet服务器页面


   1.get方式提交请求:


       1.复制调用创建方法,得到引用对象
       2.回调函数:  1.onreadystatechange = function (){
             1,判断他readyState是否为4, 然后嵌套在判断status==200,
            
             2, 获取相应数据: 对象.responseText;
             3,将数据写入div: document.getelemenid() .innerHTML=2;
          }; 
 
       3.  1.open("GET","day15/servlet ? name=aaa&password=111",true);
       4.  1.send(null);




   2.post方式提交请求:
  
       1.复制调用创建方法,得到引用对象


       2.回调函数:  1.onreadystatechange = function (){
             1,判断他readyState是否为4, 然后嵌套在判断status==200,
            
             2, 获取相应数据: 对象.responseText;
             3,将数据写入div: document.getelemenid() .innerHTML=2;
          }; 


       3.  1.open("POST","/servlet",true);


       4. 设置请求头: xmr.setRequestHeader("Content-Type","application/x-www-form- urlencoded");
       5.  1.send("name=aa&pass=123");


   6.在servlet页面加上 request.setcharacterEncoding("UTF-8")




在Tomcat中XML中 listings的value变为true;会列出资源

Jquery的异步操作:
  
   1.常用的方法,里面参数都是重载的
      Jq对象.load(url路径,data参数,callback回调函数);


      $.get(路径,参数,回调函数,数据类型);


      $.post(路径,参数,回调函数,数据类型);


      $.ajax({option1:value11,option2,value2....}); 可设置的参数特别多,get和post满足不了用
         (可选)options的取值:
              async :是否异步,默认true
              cache:缓存
              失败函数, 成功函数, 请求超出时间,请求地址


       用法: $.ajax({url: 服务器地址,type: "POST", success: function(data){}); 
                                                              data自己起名,随便改


      对象.serialize();---JQ的AJAX传递参数时
         例如:  $("form").serialize();---JQ的AJAX传递参数时, 就可以获得表单内所有的参数