AJAX学习

AJAX学习

• 概念

  • AJAX简称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），首先AJAX不是一门新的编程语言，只是一种现有的新的标准方法，最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分页面内容。
  • 工作原理
  • 相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。
  • 创建AJAX实例步骤
    • 加载org.json.jar文件
    • 创建输入页面以接收任何文本或数字
    • 创建服务器端页面以处理请求
    • 在web.xml文件中提供条目
  • XHR创建对象

    • XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。用于客户端和服务器之间的异步通信。主要执行以下操作

      • 1在后台从客户端发送数据
      • 2 从服务器接受数据
      • 3 更新网页不需要加载

    • 创建XMLHttpRequest对象
      -所有的现代浏览器（IE7+、Firefox、Chorme…）都内建 XMLHttpRequest 对象。

      	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");
        }
      
      

    • XMLHttpRequest对象的属性
      

    • XMLHttpRequest对象的方法
      

• XHR 请求
  • 原理
    
    1.用户从UI发送请求，JavaScript中调用XMLHttpRequest对象。
    2.HTTP请求由XMLHttpRequest对象发送到服务器。
    3.服务器使用JSP，PHP，Servlet，ASP.net等与数据库交互。
    4.检索数据。
    5.服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。
    6.HTML和CSS数据显示在浏览器上。
  • 向服务器发送请求
    • 页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。将请求发送到服务器，使用 XMLHttpRequest 对象的open()和send()方法： xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
      
    • async=“true(false)”:　XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync参数必须设置为 true，　通过 AJAX，JavaScript 无需等待服务器的响应，而是在等待服务器响应时执行其他脚本，然后当响应就绪后对响应进行处理。

    	xmlhttp.onreadystatechange=function()
    	  {
    		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    	    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    	  }
    	xmlhttp.open("GET","ajax_info.txt",true);//当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
    	xmlhttp.send();
    

    xmlhttp.open("GET","test1.txt",false);//不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
    

  • XHR 响应
    • 状态行
      xhr.status状态码，如200，304，404等；
    • 响应主体
      xhr.responseText与xhr.responseXML都表示响应主体。
      responseText: 获得字符串形式的响应数据。
      responseXML: 获得 XML 形式的响应数据。

        xmlDoc=xmlhttp.responseXML;
        txt="";
        x=xmlDoc.getElementsByTagName("ARTIST");
        for (i=0;i<x.length;i++)
        {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
        }
        document.getElementById("myDiv").innerHTML=txt;
      

      • XHR readyState
        • 当发送一个请求后，客户端需要确定这个请求什么时候会完成，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，实现响应。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有 XMLHttpRequest 的状态信息。
        • 0：请求未初始化
          确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。
        • 1：服务器连接已建立
          对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（method,url,true）完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
        • 2：请求已接收
          接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。
        • 3：请求处理中
          解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
        • 3：请求已完成，且响应已就绪
          确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

• 总结

  • AJAX主要的用处就是局部刷新，而且是异步的这样的话就会高效很多，与原来的请求的话原理也差不多，只不过这个是局部刷新而已。