Ajax基础 (一)

很久没写过读书心得什么之类的东西了。记得小时候经常要写这些东西的。那时候感觉很烦，现在大概是人老了。老是怕记不住，看点啥都想着记下来。本篇就是一个完全的读书记录。

 

第二章

 

2-1创建XMLHttpRequest对象实例代码

function createXMLHttpRequest（）{

       if (window.ActiveXObject) {

       xmlHttp = new ActiveXObject (“Microsoft.XMLHTTP”);

       }

       Else if (window.XMLHttpRequest) {

       xmlHttp = new XMLHttpRequest();

       }

}

XMLHttpRequest对象的方法和属性：

       方法：     abort（）

                          getAllResponseHeaders()

                          getResponseHeader(“header”)

                          open(“method”,”url”)

                          send(content)

                          setRequestHeader(“header”,”value”)

       属性：     onreadystatechange

                          redyState

                          responseText

                          responseXML

                          status

                          statusText

                                           

                                                                        第三章

3.1  使用innerHTML属性创建动态内容

关键代码：docmuent.getElementById(“IdName”).innerHTML = xmlHttp.responseText;

 

3.2 DOM

       用于处理XML文档的DOM元素属性：

              childNodes           返回当前元素所有子元素的数组

              firstChild                返回当前元素的第一个下级子元素

              lastChild                    返回当前元素的最后一个子元素

              nextSibling                    返回紧跟在当前元素后面的元素

              nodeValue                           指定表示元素值的读/写属性

              parentNode                        返回元素的父节点

             previousSibling                   返回紧邻当前元素之前的元素

       用于遍历XML文档的DOM元素方法：

                getElementById(id) (document)      获取有指定惟一ID属性值文档中的元素

                getElementsByTagName(name)     返回当前元素中有指定标记名的子元素的数组

                hasChildNodes()              返回一个布尔值，指示元素是否有子元素

                getAttribute(name)          返回元素的属性值，属性由name指定

 

3.3 动态创建内容是所用的DOM属性和方法

       document.createElement(tagName)

            创建由tagName指定的元素，如果以串div作为方法参数，就生成一个div元素

       document.createTextNode(text)

                创建一个包含静态文本的节点

       <element>.appendChild(childNode)

                将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。

       <element>.getAttribute(name)

                获取元素中name属性的值

       <element>.setAttribute(name,value)

                设置元素中name属性的值

       <element>.insertBefore(newNode,targetNode)

                将节点newNode作为当前元素的子节点插到targetNode元素前面

       <element>.removeAttribute(name)

                从元素中删除属性name

       <element>.removeChild(childNode)

                从元素中删除子元素childNode

       <element>.replaceChild(newNode,oldNode)

                将节点oldNode替换为节点newNode

       <element>.hasChildnodes()

                返回一个布尔值，指示元素是否有子元素

 

文本实际上是文本元素（父节点）的一个子节点。

       获取文本的方式：

<textelement>.childNodes[0].nodeValue

                          <textelement>.firstChild.nodeValue

 

3.4 发送请求参数

       GET与POST方法的区别：POST方法将参数串放在请求体中发送，GET方法是将参数追加到URL中发送。获取数据时推荐使用GET方法，如因为存储，更新数据时建议用POST方法。从发送到服务器的数据量看，POST更灵活，GET发送的数据量通常是固定的，POST方法可以发送任意量的数据。

       HTML form元素允许通过将form元素的method属性设置为GET或POST来指定所需的方法。在提交表单时，form元素自动根据其method属性的规则对input元素的数据进行编码。

       把时间戳追加到目标URL的好处：某些情况下，浏览器会把多个XMLHttpReques请求的结果缓存在同一个URL，如果对每个请求的响应不同，这就会出现问题了。把当前时间戳追加到URL的最后，就能保证URL的惟一性，可以避免缓存结果。

       GET方法和POST方法比较：

function doRequestUsingGET(){

       createXMLHttpRequest();

       var queryString = “ ”+ new Date().getTime();//组建URL，并包括参数部分。

       xmlHttp.onreadystatechange = functionname;

       xmlHttp.open(“GET”,queryString,true);

       xmlHttp.send(null);

}

 

function doRequestUsingPOST(){

       createXMLHttpRequest();

       var url = “”+ new Date().getTime();//组建单纯URL

       var queryString = “”;//参数部分

       xmlHttp.open(“POST”,url,true);

       xmlHttp.onreadystatechange = functionname;

     //为确保服务器知道请求体中有请求参数，调用setRequestHeader,将Content-Type值设置为application/x-www-form-urlencoded;

       xmlHttp.setRequesHeader(“Content-Type”,”application/x-www-form-urlencoded;”);

       xmlHttp.send(queryString);

}

 

3.5请求参数作为XML发送

 多选列表：

       <select id=”idname” size=”6” multiple=”true”>

                <option value=”opvalue”>option</option>

                <option value=”opvalue”>option</option>

                <option value=”opvalue”>option</option>

                <option value=”opvalue”>option</option>

                <option value=”opvalue”>option</option>

       </select>

      

       function createXML(){

                var xml = “<pets>”;

                var options = document.getElementById(“idname”).childNodes;

                var option = null;

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

                          option = options[i];

                          if(option.selected){

                                   xml = xml + “<type>” +option.value + “<//type>”;

                          }

                }

                xml = xml + “<//pets>”;   //使用反斜杠可以避免把串解析为标记。

                return xml;

       }

 

       利用POST方法把得到的xml串发过去。

使用串连接来创建xml，而不是直接创建文档和元素对象的原因：

       从头构建文档对象，目前还没有跨建浏览器的技术。

 

服务器端用Java servlet来处理得到的XML串。

代码清单：

       package ajaxbook.chap3;//建包

      

       import  java.io.*;

       import  javax.servlet.*;

       import  javax.servlet.http.*;

       import      javax.xml.parsers.DocumentBuilderFactory;

       import      javax.xml.parsers.ParserConfigurationException;

       import      org.w3c.dom.Document;

       import      org.w3c.dom.NodeList;

       import      org.xml.sax.SAXException;

 

       public class PostiongXMLExample extends HttpServlet{

                protected void doPost(HttpServletRequest reques,HttpServletResponse response)

                          throws ServletException,IOException{

                          String xml = readXMLFromRequestBody(request);

                          Document xmlDoc = null;

                          try{

                                   xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder()

                                   .parse(new ByteArrayInputStream(xml.getBytes()));

                          }

                          catch(ParserConfigurationException e){

                                   System.out.println(“”+e);

                          }

                          catch(SAXException e){

                                   System.out.println(“”+e);

                          }

                          //使用JAXP接口将XML串转换为document对象。

                          NodeList selectedPetTypes = xmlDoc.getElementsByTagName(“type”);

                          String  type = null;

                          String  responseText = “Selected Pets:”;

                          for(){

                                   type = selectedPetTypes.item(i).getFirstChild().getNodeValue();

                                   responseText = responseText + “ ” + type;

                          }

                          response.setContentType(“text/xml”);

                          response.getWriter().print(responseText);

}

 

private String readXMLFromRequestBody(HttpServletReques request){

         StringBuffer xml = new StringBuffer();

         String line = null;

         try{

                   BufferedReader reader = request.getReader();

                   while((line = reader.readLine()) != null){

                            xml.append(line);

                   }

         }

         catch(Exception e){

                   System.out.println(“Error reanding XML”+e.toSting());

         }

         return xml.toString();

}

       }

//通过串连接来创建XML串并不好，也不是生成或修改XML数据结构的健壮技术。

3.6 使用JSON向服务器发送数据   JSON JavaScript库可以免费得到（www.json.org）

       JSON是一种文本格式，独立于具体语言。可以作为异构系统之间的一种数据互换格式。

       JSON的数据结构基础：

1.       名/值对集合。（值可以是串，数值，true，false，对象，或者数组）

2.       值的有序表。

关键代码部分：

JS部分：利用JSON库里面的function

         <script type="text/javascript" src="json.js"></script>

         var carAsJSON = JSON.stringify(car);

         function Car(make, model, year, color) {

    this.make = make;

    this.model = model;

    this.year = year;

    this.color = color;

}

createXMLHttpRequest();

    xmlHttp.open("POST", url, true);

    xmlHttp.onreadystatechange = handleStateChange;

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

    xmlHttp.send(carAsJSON);

服务器Java部分：利用已有的Java包处理jsonobject.

import java.io.*;

import java.net.*;

import java.text.ParseException;

import javax.servlet.*;

import javax.servlet.http.*;

import org.json.JSONObject;

 

String json = readJSONStringFromRequestBody(request);

        try {

            jsonObject = new JSONObject(json);

        }

        catch(ParseException pe) {}

 

    private String readJSONStringFromRequestBody(HttpServletRequest request){

        StringBuffer json = new StringBuffer();

        String line = null;

        try {

            BufferedReader reader = request.getReader();

            while((line = reader.readLine()) != null) {

                json.append(line);

            }

        }

        catch(Exception e) {

            System.out.println("Error reading JSON string: " + e.toString());

        }

        return json.toString();

 

                 String responseText = "You have a " + jsonObject.getInt("year") + " "

            + jsonObject.getString("make") + " " + jsonObject.getString("model")

            + " " + " that is " + jsonObject.getString("color") + " in color.";

       

        response.setContentType("text/xml");

        response.getWriter().print(responseText);