yongtaiyu

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

Ajax
1、什么是Ajax?
 Asynchronous javascript and xml:
 异步的javascript和xml
 其实质是一种动态页面生成技术,js通过调用
 浏览器内置的一个对象(XmlHttpRequest)向服务器
 发送请求,服务器将生成的结果返回给XmlHttpRequest,
 然后,js通过操作dom,来生成动态页面。
 传统的web编程:
 浏览器向服务器发送请求,会丢弃整个页面,然后等待服务器
 的响应,在服务器响应到达浏览器之前,浏览器什么都不能做。
 服务器返回的也是一个完整的页面,然后浏览器加载这个
 页面生成相应的界面。
  Ajax改进了“发送-等待-响应”这种编程模型,使用ajax
  引擎(即浏览器内置的一个对象 XmlHttpRequest)向服务器
  发请求。此时,浏览器并没有丢弃页面。
2、Ajax编程的基本步骤
 step1 获得浏览器内置的 XmlHttpReuqest对象。
 XmlHttpRequest对象仍然没有标准化,所以对不同的
 浏览器,要使用不同的方式来创建。
  function getXmlHttpRequest(){
    var xmlHttpRequest = null;
                if ((typeof XMLHttpRequest) != 'undefined') {
                    xmlHttpRequest = new XMLHttpRequest();
                }
                else {
                    xmlHttpRequest =
                    new ActiveXObject('Microsoft.XMLHttp');
                }
                return xmlHttpRequest;
  }
 
 step2 使用XMLHttpRequest对象向服务器发送请求(get/post)
  发送get请求
                var url="some";
                xmlHttpRequest.open('GET', url, true);
                三个参数:
                 1)请求方式 get/post
         2)要访问的组件的地址,如果带参数: some?name=zs
                 3)true:异步发送请求。
                xmlHttpRequest.onreadystatechange = fun1;
                注册一个回调函数:
                xmlHttpRequest对象与服务器交互的过程当中,
                有几个状态,每当状态发生改变,就会产生
                readystatechange事件,该事件由fun1来处理。
                xmlHttpRequest.send(null);
                send方法里,必须填写null。
   发送post请求
    xmlHttpRequest.open("POST",url,true);
              xmlHttpRequest
              .setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded");
              xmlHttpRequest.send("name=zs&age=22");
     step3 服务器处理请求
     step4 在回调函数当中,处理服务器的响应。
       function fun1(){
        if(xmlHttpRequest.readyState == 4){
         var rs = xmlHttpRequest.responseText;
         //var rs = xmlHttpRequest.responseXML;
         dom操作
        }
       }
    3、比较get/post方式发送请求
      get方式:
        在ajax应用当中,采用get方式发送请求,
      不同的浏览器对于中文采用不同的编码。
      对于Firefox,采用的是utf-8编码,而ie,
      采用的是gb2312,为了统一客户端的编码
      可以使用
       encodeURI : 对整个url地址进行utf-8编码。
       encodeURIComponent:对部分url参数进行utf-8编码。
      post方式:
       在ajax应用当中,采用post方式发送请求,
       采用浏览器打开该页面时的编码来对中文进行编码。
      结论:
       如果要考虑中文,最好使用post方式,另外,post方式
       发送的数据量更大。 
     4、XmlHttpRequest对象的常用属性
         onreadystatechange: 绑订回调函数 
         readyState:返回XmlHttpRequest与服务器之间交互的状态
         status:返回状态码
         responseText:返回服务器送回的文本数据。
         responseXML:返回服务器送回的xml数据。
      一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。
       例如 :
                    var url = "login.jsp?user=XXX&pwd=XXX";
                    xmlHttpRequest.open("GET",url,true);
                    xmlHttpRequset.send(null);
       此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
       例如:
                   xmlHttpRequest.open("POST","login.jsp",true);
                   xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
                   xmlHttpRequest.send("user="+username+"&pwd="+password);
        需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法

posted on 2013-06-11 15:27  yongtaiyu  阅读(203)  评论(0编辑  收藏  举报