AJAX笔记

2019独角兽企业重金招聘Python工程师标准>>>

         AJAX笔记

1、同步和异步交互：不用刷新整个页面边可以与服务器通讯的办法；

1．Flash

2．Java applet

3．框架 如果使用一组框架构造一个页面，不用动整个页面

4．隐藏的iframe

5．XML HttpRequest:该对象是对javaScript的一个扩展，可以使页面与服务器进行通信。当成 xmlHttpRequest对象的代名词。

 

2、AJAX工作原理 AJax在用户与服务器之间引用一个中间媒介，从而消除了网络交互过程中的处理-等待-处理-等待等缺点。浏览器在执行时装载了AJAX引机。（包含：javascript css、dom、xml、和xmlHttprequest）

 核心的xmlHTTPRequst。是一种支持异步请求的技术。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

3、请求方式：

1、建立xmlHttpRequest 返回 调用它的方法赋值。

2、连接服务器实现监控 返回值.onreadystatechange 通过xmlReq.status 可以查看接收的5中状态。If(xmlreq.readyState==4)//响应发送完毕{if(xmlReq.status==200||xmlreq.status==304){}}

3、Open(“post”,”路径”,true);

4、Send(date)//一般为空字符串。

4、status报错：200一切正常，403禁止访问 500空值内部服务器出错 304源文件没有被修改。

 

5、配置好服务端响应一次问题：点击按钮后由于存在缓存，路径没有发生变法。只会响应一次请求。

解决：怎样保存每次路径发生变法 加一个时间变量。Open（“get”,”../testservlet?timesttamp=”+newDate().getTime()+”$a=9”,”true”）;//这里还能接参数

客户端用request.getParameter(“a”)接收

6、XMLHttpRequest对象属性和open方法服务器的连接，发送方法send（date）：

l        Open（“methed”,”url”，asynch）;XMLHttpRequest对象的open方法允许程序员用一个AJAX调用向服务器发送请求。

Methed:请求类型，类型有“get”或”post”字符串。若只想从服务器检索一个文件而不需要发送任何数据。使用GET。若需要向服务器发送数据。用post

Url：路径字符串，指向你所请求的服务器上的那个文件，可以是绝对路径和相对路径。（../servlet路径）

Asynch：表示请求是否要异步传输。默认为true

l        Send方法：可为已经待命的请求发送指令。Data将要传递服务器的字符串

 

 

 

 

l          onreadystatechange:：该事件处理函数由服务器触发，而不是用户

 更新XMLHttpRequest对象的readyState来实现。

7、接收方法和属性：

readyState :readyState 属性表示Ajax请求的当前状态，它的值yoga数字表示。

u      0表示未初始化，还么有调用open方法

u      1代表正在加载，open方法已调用，单send方法还没有被调用

u      2代表已加载完毕。Send已被调用，请求已经开始

u      3代表交互中，服务器正在发送响应

u      4代表完成，响应发送完毕。

每次readState值的改变，都会触发值改变

responseXML如果返回的是XML，那么数据存在response中 要把字体改为text/xml

8、Ajax与服务器的建立方式：

l        Ajax与服务器的建立连接，接收服务器的请求，处理服务器返回的数据

开发步骤：

1．创建XMLHttpRequest对象

2．打开和服务器的连接

3．发送数据

4．接收服务器端的响应

l        处理事件单击按钮响应 连接一个js winow.onlaod 函数onclick响应事件

在函数中写上面实现代码。

怎样创建XMLHttpRequest对象

Var xmlHttpReq=new ActiveXobject(‘MSXML2.XMLHTTP.3.O”);//

xmlHttpReq.open(”GET”,”http://localhost/books.xml”,false);

xmlHttpReq.send();

Alert(xmlHttpReq.responseText);

非IE浏览器

就是 var XmlHttpReq =new XMLHttpRequest();

 function ajaxHttpRequest()

 {

   var xmlHttp;

   try{

   xmlHttp=new XMLHttpRequest();  

   }catch(e)

   {

    try{

       xmlHttp=new ActiveXObject("Msxm12.XMLHTTP");

    }

    catch(e)

    {

      try{

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }catch(e){}

    }

  

   }

 

 }

jQuery不用写上面这些代码。

9、POST请求方式：

 

 

function ajaxFunction(){

    var xmlHttp;

    try {

        xmlHttp=new XMLHttpRequest();

    } catch (e) {

        try {

            xmlHttp=new ActiveXObject("Msxm12.XMLHTTP");

        } catch (e) {

            try {

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {

            }

        }

    }

    return xmlHttp;

   

}

window.οnlοad=function()

{/*

    <td><input type="text" name="username" value="" id="username">

    <div id="mydiv"> </div>

    <input type="button" name="checkname" value="查看用户名" id="checkname">

 */

    document.getElementById("checkname").οnclick=function()

    {

        //alert("aaa");

        var username=document.getElementById("username").value;

        //alert(username);

         var xmlReq=ajaxFunction();

         xmlReq.onreadystatechange=function()

         {

           //alert(xmlReq.readyState);

          if(xmlReq.readyState==4)

              {

              if(xmlReq.status==200||xmlReq.status==304)

                  {

                   var data=xmlReq.responseText;//相对于一个路径的页面内容。可以直接在页面中赋值给它响应页面。

                   document.getElementById("mydiv").innerHTML=data;

                  }

              }

         }

           xmlReq.open("post","testServlet",true);

           xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

           xmlReq.send("username="+username);

 

    }

}

 

10、用AjAx通过服务器printwrint输出out.print<province name=value>的创建步骤：

1、先通过getElmentsByTagName(“province”)获得元素。得到数组

2、遍历数组获得该元素的属性：getAttribute（“name”）

3、用document,.createElment(“option”)//创建元素

4、给创建的元素设置value值setAttribute.

5、创建document.createTextNode(attriname)//文本节点给获得的getAttribute.

6、用创建的option.appendChild(text)文本节点。

代码：

 var xmlDoc=xmlReq.responseXML;

                   //  document.getElementById("mydiv").innerHTML=data;

                       var prc=xmlDoc.getElementsByTagName("province");

                       for(var i=0;i<prc.length;i++)

                       {

                        var prcs=prc[i];

                        var attrname=prcs.getAttribute("name");

                        var province=document.createElement("option");

                        province.setAttribute("value", attrname);

                        var textElement=document.createTextNode(attrname);

                        province.appendChild(textElement);

                        var p=document.getElementById("select");

                        p.appendChild(province);

11、Json数据格式3中格式返回XML HTML JSON

Json对象：是一个无序的“名称/值/对”集合。一个对象以{左括号开始}右括号结束每个名称后跟一个冒号：（名称/值）对直接使用，逗号分隔。

 

有8个包 增强包，json-lib-2 库包装好了Ext_js无刷新 www.open-open.com

 

 

 

 

 

 

这里出现一个函数eval把一个字符串当作它的参数。

v       List集合转换json对象

l        1、建立实体类构造方法

l        2、建立LIst集合添加实例化类的 把几个实例化类添加到list集合中

l        3、直接用 JSONArray js=JSONArray.fromObject(list);

l        4、过滤JsonConfig config=new JsonConfig(); config.setExcludes(new  String[]{“pid”});过滤掉list集合中的Id不生成json

好处是可以直接显示出来 不用在jsp页面中变量循环出来了。

v      一个对象转换成Json对象。

Province p=new province(1,”吉林省”);

JSONObject jsonObject=JSonObject.fromObject(p);

 

JQuery中AJAX相关工具函数。

问题：元素进行遍历、同时对一些特需的元素进行判断如复选框和单选框按钮。判断他们是否被选中，判断表单元素是否被禁用。

v      Serialize()方法 根据包装集里所有的成功表单元素，创建正确格式化的、经过URI编码的查询字符串。

转载于:https://my.oschina.net/u/1042750/blog/187295