首页 > 代码库 > 【知识点】Ajax

【知识点】Ajax

2024-07-10 04:26:26   234人阅读

  1. JS/Ajax

  1. JavaScript基础知识

  2. 常识

    js的特点：调试起来比较困难；是弱类型的。

  • Aptana简介

Aptana是一个非常强大，开源，专注于javaScript的Ajax开发的IDE，它的特性包括

  1. javaS，JavaScript函数，html，css语言的CodeAssist功能
  2. Outliner（大纲）：显示JavaScript，html和css的代码结构
  3. 支持js，html，css代码提示，包括js自定函数
  4. 代码语法错误提示
  5. 支持ApatanaUI自定义和扩展
  6. 调试Js
  7. 支持流行Ajax框架的CodeAssist功能：jQuery
  • 安装

    Aptana插件在eclipse中安装

Aptana插件在MyEclipse中安装：http://duozhilin.blog.163.com/blog/static/18497150420133852222719/

  • Aptana增加提示功能

建立动态web应用

工程右键->，建立的web应用不指定服务器（Eclipse环境）

  1. 浏览器的对象树

    window对象常用方法

    alert(‘信息‘) ????消息框

    prompt(‘提示信息‘，默认值)： 标准输入框

    confirm( ) ????????确认框

    open( ) ????????打开一个新窗口

    close( ) ???? ????关闭窗口

    Form表单对象

    访问表单的方式:

    * document.forms[n]

    * document.表单名字

    表单对象常用的属性

    action???? <from action="xxx">????表单提交的目的地址

    method???? <form method="xxx">表单提交方式

    name???? <form name="xxx">????表单名称

  2. JS中定义函数的两种方式

    1：第一种方式：和Java中使用函数一样，要想使用要通过名称去调用

    ????function 函数名(参数1，参数2){

    ????????//函数体

    }

    注意：

    不指定任何函数值的函数，返回undefined

    对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert("sum=" + square(2，3));

    2：第二种方式：构造函数方法：new Function();

    ????var 函数名=new Function("参数1"，"参数2"，"函数体");

    注:

    接受任意多个字符串参数，最后一个参数是函数体。

    如果只传一个字符串，则其就是函数体。

    3：函数直接量定义函数

    var result=function(a，b){return a+b;}????//使用函数直接量的方式定义函数

    //调用使用函数直接量定义的函数

    var sum=result(7，8);

    alert(sum);

    ????注：函数直接量是一个表达式，它可以定义匿名函数

    <body>

    <form name="form1" action="test.html" method="post">

    <input type="text" name="username" value="zhang" />

    <input type="button" name="ok" value="保存1" onclick="printFormAction()"/>

    <!-- 点击保存后执行 -->

    </form>

    </body>

    <script language="JavaScript">

    //构造函数方式定义javascript函数：打印表单的action取值

    function printFormAction(){

    alert{document.form[0].action);

    }

    //调用上面使用构造函数方式定义的javascript函数

    printFormAction();

    //使用函数直接量的方式定义函数

    var printFormAction=new Function{"alert(document.form[0].action)");

    printFormAction();

    ?

    var add=new Function("p1"，"p2"，"return p1+p2");

    alert(add(1，2));

    //调用使用函数直接量定义的函数(常用，打印method)

    var printMethod=function(){

    alert(document.form[0].method);

    }

    printMethod():

    </script>

  3. Dom

  4. 基础

    DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

    D：文档 – html 文档 或 xml 文档

    O：对象 – document 对象的属性和方法

    M：模型

    DOM 是针对xml(html)的基于树的API。

    DOM树:节点（node）的层次。

    DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

    DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

  5. 节点

    节点：由结构图中我们可以看到，整个文档就是一个文档节点。

    而每一个HMTL标签都是一个元素节点。

    标签中的文字则是文本节点。

    标签的属性是属性节点。

    一切都是节点……

    节点树：最上面的就是"树根"了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

    NODE接口的特性和方法

    nodeName

    String

    节点的名字；根据节点的类型而定义

    nodeValue

    String

    节点的值；根据节点的类型而定义

    nodeType

    Number

    节点的类型常量值之一

    ownerDocument

    Document

    指向这个节点所属的文档

    firstChild

    Node

    指向在childNodes列表中的第一个节点

    lastChild

    Node

    指向在childNodes列表中的最后一个节点

    childNodes

    NodeList

    所有子节点的列表

    previousSibling

    Node

    指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null

    nextSibling

    Node

    指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null

    hasChildNodes()

    Boolean

    当childNodes包含一个或多个节点时，返回真

    attributes

    NamedNodeMap

    包含了代表一个元素的特性的Attr对象；仅用于Element节点

    appendChild(node)

    Node

    将node添加到childNodes的末尾

    removeChild(node)

    Node

    从childNodes中删除node

    replaceChild(newnode， oldnode)

    Node

    将childNodes中的oldnode替换成newnode

    insertBefore(newnode， refnode)

    Node

    在childNodes中的refnode之前插入newnode

    1: 查找元素节点：getElementById()

    寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

    var oElement = document.getElementById ( sID )

    该方法只能用于 document 对象

    <body>

    <form name="form1" action="test.html" method="post" >

    <input type="text" name="username" value="传智播客5周年_1" id="tid" onchange="" >

    <input type="button" name="ok" value="保存1"/>

    </form>

    </body>

    var inputObj=document.getElementById("tid");

    alert(inputObj.value);

    //获取标签中值

    window.alert(inputElement.value);

    //type="text"

    window.alert(inputElement.type);

    2: getElementsByName()

    寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

    <body>

    <form name="form1" action="test.html" method="post" >

    <input type="text" name="tname" value="传智播客5周年_1" id="tid_1" ><br>

    <input type="text" name="tname" value="传智播客5周年_2" id="tid_2" ><br>

    <input type="text" name="tname" value="传智播客5周年_3" id="tid_3" ><br>

    <input type="button" name="ok" value="保存1"/>

    </form>

    </body>

    <script language="JavaScript">

    //通过元素的name属性获取所有元素的引用 name="tname"

    var tnameElements=document.getElementsByName("tname");

    //测试该数据的长度

    alert(tnameElements.length);

    //遍历元素，输出所有value属性的值

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

    var tnameElment=tnameElements[i];

    alert(tnameElment.value);

    }

    //为每个文本框(<input type="text">)增加chanage事件，当值改变时，输出改变的值

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

    //<input type="text" name="tname" value="http://www.mamicode.com/传智播客5周年_1" id="tid_1" on><br>

    var tnameElment=tnameElements[i];

    //给文本框增加change事件

    //使用函数直接量的定义方式

    tnameElment.onchange=function(){

    //this ===tnameElment

    alert(this.value);

    }

    }

    3：getElementsByTagName()

    寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

    var elements = document.getElementsByTagName(tagName);

    var elements = element.getElementsByTagName(tagName);

    该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

    var container = document.getElementById("sid");

    var elements = container.getElementsByTagName("p");

    alert(elements .length);

    4：查看是否存在子节点：hasChildNodes()????

    该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

    var booleanValue = http://www.mamicode.com/element.hasChildNodes();>

    文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false。如果 hasChildNodes 方法的返回值是 false，则 childNodes，firstChild，lastChild 将是空数组和空字符串。

    5：替换节点：replaceChild()

    把一个给定父元素里的一个子节点替换为另外一个子节点

    ????var reference = element.replaceChild(newChild，oldChild);

    返回值是一个指向已被替换的那个子节点的引用指针。

    如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

    6：查找属性节点：getAttribute()

    返回一个给定元素的一个给定属性节点的值

    var attributeValue = http://www.mamicode.com/element.getAttribute(attributeName);

    给定属性的名字必须以字符串的形式传递给该方法。

    给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.

    通过属性获取属性节点

    getAttributeNode(属性的名称)--Node

    7：设置属性节点：setAttribute()

    将给定元素节点添加一个新的属性值或改变它的现有属性的值。

    element.setAttribute(attributeName，attributeValue);

    属性的名字和值必须以字符串的形式传递给此方法，如果这个属性已经存在，它的值将被刷新；如果不存在，setAttribute()方法将先创建它再为其赋值。

    8：创建新元素节点：createElement()

    按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

    var reference = document.createElement(element);

    方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。

    新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象：var pElement = document.createElement("p");

    9：创建新文本节点：createTextNode()

    创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。

    var textNode = document.createTextNode(text);

    方法只有一个参数：新建文本节点所包含的文本字符串

    方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.

    新元素节点不会自动添加到文档里，新节点没有nodeParent 属性

    var pElementText=document.createElement("li");

    var textElement=document.createTextNode("南京");

    pElementText.appendChild(textElement);

    10：插入节点insertBefore()

    把一个给定节点插入到一个给定元素节点的给定子节点的前面

    var reference = element.insertBefore(newNode，targetNode);

    节点 newNode将被插入到元素节点element中并出现在节点 targetNode 的前面.

    节点 targetNode 必须是 element 元素的一个子节点。

    该方法通常与 createElement() 和 createTextNode() 配合使用

    11：删除节点：removeChild()

    从一个给定元素里删除一个子节点

    var reference = element.removeChild(node);

    返回值是一个指向已被删除的子节点的引用指针。

    某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。

    如果想删除某个节点，但不知道它的父节点是哪一个，parentNode属性可以帮忙

    12：遍历节点：ChildNodes()

    ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：var nodeList = node.childNodes;

    文本节点和属性节点都不可能再包含任何子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。

    如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。

    如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。

    childNodes 属性是一个只读属性。

    13：获取第一个子节点：firstChild()

    firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。

    var reference = node.firstChild;

    文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null。

    某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：

    var reference = node.ChildNodes[0];

    firstChild 属性是一个只读属性。

    14：获取最后一个子节点

    lastChild：对应 firstChild 的一个属性。

    nextSibling: 返回一个给定节点的下一个兄弟节点。

    parentNode：返回一个给定节点的父节点。

    parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。

    document 节点的没有父节点。

    previousSibling：返回一个给定节点的上一个兄弟节点

    15：innerHTML属性

    浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。

    innerHTML属性可以用来读，写某给定元素里的HTML内容。

  6. Dom属性

    文档里的每个节点都有以下属性。

    1：nodeName：返回一个字符串，其内容是给定节点的名字。

    var name = node.nodeName;

    * 如果节点是元素节点，nodeName返回这个元素的名称

    * 如果是属性节点，nodeName返回这个属性的名称

    * 如果是文本节点，nodeName返回一个内容为#text 的字符串

    注：nodeName 是一个只读属性。

    2：nodeType：返回一个整数，这个数值代表着给定节点的类型。

    nodeType 属性返回的整数值对应着 12 种节点类型，常用的有三种：

    Node.ELEMENT_NODE ---1 -- 元素节点

    Node.ATTRIBUTE_NODE ---2 -- 属性节点

    Node.TEXT_NODE --3 -- 文本节点

    注：nodeType 是个只读属性

    3：nodeValue：返回给定节点的当前值（字符串）

    如果给定节点是一个属性节点，返回值是这个属性的值。

    如果给定节点是一个文本节点，返回值是这个文本节点的内容。

    如果给定节点是一个元素节点，返回值是 null

    nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，

    但可以为文本节点的 nodeValue 属性设置一个值。

    var li = document.getElementById("li");

    if(li.firstChild.nodeType == 3)

    li.firstChild.nodeValue = "http://www.mamicode.com/传智播客";

  7. Dom案例

    1. 示例1：实时添加和删除用户信息

    1. 代码文件：代码\js_实时添加和删除用户信息.html

    关键代码：

    <script language="JavaScript">

    // 1.得到添加按钮，注册onclick事件

    var addUserBtn=document.getElementById("addUser");

    addUserBtn.onclick=function(){

    // 2.得到三个输入域的value值

    var inputNameValue=document.getElementById("name").value;

    var inputEmailValue=document.getElementById("email").value;

    var inputTelValue=document.getElementById("tel").value;

    alert(inputNameValue+"\t"+inputEmailValue+"\t"+inputTelValue);

    // 3.得到tale元素

    var tableElement=document.getElementById("usertable");;

    // 4.创建tr元素

    var trElement=document.createElement("tr");

    // 5.创建td元素：四个，并设置其文本子元素

    // <td>Tom</td>

    // <td>tom@tom.com</td>

    // <td>5000</td>

    // <td><a href="http://www.mamicode.com/deleteEmp?id=Tom">Delete</a></td>

    var tdNameElement=document.createElement("td");

    tdNameElement.innerHTML=inputNameValue;

    var tdEmailElement=document.createElement("td");

    tdEmailElement.innerHTML=inputEmailValue;

    var tdTelElement=document.createElement("td");

    tdTelElement.innerHTML=inputTelValue;

    var tdDeleteElement=document.createElement("td");

    var aElement=document.createElement("a");//<a/>

    aElement.setAttribute("href","#");//<a href="http://www.mamicode.com/#"/>

    var delTextNode=document.createTextNode("delete");

    aElement.appendChild(delTextNode);//<a href="http://www.mamicode.com/#">delete</a>

    // 8.添加删除的事件

    aElement.onclick=function(){

    //得到它的大哥中的文本

    var namevalue=this.parentNode.parentNode.firstChild.firstChild;

    var sure=window.confirm("确定要删除"+namevalue+"吗");

    if (sure) {

    //找到它的爸爸（td）的爸爸（tr）的爸爸（tbody）,删除它的爸爸（td）的爸爸（tr）

    // alert(this.parentNode.parentNode.parentNode.nodeName);

    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

    }

    }

    tdDeleteElement.appendChild(aElement);

    ?

    // 6.把td挂到tr上

    trElement.appendChild(tdNameElement);

    trElement.appendChild(tdEmailElement);

    trElement.appendChild(tdTelElement);

    trElement.appendChild(tdDeleteElement);

    // 7.把tr挂接到table上，要跨浏览器支持。table中有tbody，不管什么情况都要重新创建tbody，

    并加到table中。把tr挂接到tbody上

    //7.1创建tbody，加入到table中

    var tbodyElement=document.createElement("tbody");

    tbodyElement.appendChild(trElement);

    //7.2把tbody加到table中

    tableElement.appendChild(tbodyElement);

    }

    </script>

    1. 示例2：列表左右移动

    一个很重要的概念应该注意：js中的数组长度是可变的，随着程序的执行，数组的长度时刻在变化。

    代码文件：代码\js\js_列表左右移动.html

    ????改进代码：代码\js\js_列表左右移动（改进）.html

    代码\js\js_列表左右移动.html关键代码：

    <script type="text/javascript">

    //两个变量到处都要用，所以把其放到这里相当于是全局变量

    var firstSelectElement = document.getElementById("first");

    var secondSelectElement = document.getElementById("second");

    // <input name="add" id="add" type="button" class="button" value="http://www.mamicode.com/-->" />把左侧选中的option增加到右侧的选择框中

    //（左侧的叫first，右侧的叫second）

    //得到id=add的按钮，注册点击事件

    document.getElementById("add").onclick = function(){

    //得到被选中的选项

    //得到所有的option孩子

    var optionChildren = firstSelectElement.getElementsByTagName("option");

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

    if (optionChildren[i].selected) {//判断是否被选中

    //加到右侧的选择框中

    secondSelectElement.appendChild(optionChildren[i]);

    }

    }

    }

    //★双击某一个option也会被添加到右侧中(IE中不能用)

    //给option增加一个事件

    var options=document.getElementsByTagName("option");

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

    options[i].ondblclick=function(){

    //alert("aa");

    //判断父亲是谁，如果是first，弄到second中，反之亦然

    var parentElement=this.parentNode;

    //alert(parentElement.getAttribute("id"));

    if(parentElement.getAttribute("id")=="first"){

    secondSelectElement.appendChild(this);

    }else{

    firstSelectElement.appendChild(this);

    }

    }

    }

    ?

    //<input name="add_all" id="add_all" type="button" class="button" value="http://www.mamicode.com/==>" /> 把左侧的所有的option增加到右侧的选择框中

    document.getElementById("add_all").onclick = function(){

    //就这一句与上面所放的位置不一样

    var optionChildren = firstSelectElement.getElementsByTagName("option");

    var optionLength = optionChildren.length;

    for (var i = 0; i < optionLength; i++) {

    //加到右侧的选择框中

    secondSelectElement.appendChild(optionChildren[0]);

    }

    }

    // <input name="remove" id="remove" type="button" class="button" value="http://www.mamicode.com/<<--" />

    // <input name="remove_all" id="remove_all" type="button" class="button" value="http://www.mamicode.com/<<==" />

    </script>

    1. 示例3：省市二级联动

    代码文件：代码\js\省市二级联动1.zip 代码\js\省市二级联动2.zip

    //给id为province注册变化的事件

    document.getElementById("province").onchange = function(){

    //清空掉id为city的option子元素

    var citySelectElement = document.getElementById("city");

    var cityOptionElements = citySelectElement.getElementsByTagName("option");

    for (var i = cityOptionElements.length - 1; i > 0; i--) {

    citySelectElement.removeChild(cityOptionElements[i]);

    }

    //得到代表xml文档的对象

    var xmlDoc = parseXML();

    //alert(xmlDoc);

    //得到当前province选择的值:html中的

    var selectedProvince = this.value;

    //alert(selectedProvince);

    //遍历xml文档中的province元素的：判断name属性是否等于当前select的值

    var xmlProvince;//xml中对应的省份元素

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

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

    //如果是：获取xml文档中的文本

    if (selectedProvince == xmlProvinceElements[i].getAttribute("name")) {

    //alert("aa");

    xmlProvince = xmlProvinceElements[i];

    break;

    }

    //alert(xmlProvinceElements.length);

    }

    //如果是：获取xml文档中的city中的文本

    if (xmlProvince != null) {

    var xmlCitys = xmlProvince.getElementsByTagName("city");

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

    //创建option元素

    var optionElement = document.createElement("option");//<option></option>

    //设置option元素的属性和文本

    optionElement.setAttribute("value", xmlCitys[i].firstChild.nodeValue);//<option value="http://www.mamicode.com/济南"></option>

    var textNode = document.createTextNode(xmlCitys[i].firstChild.nodeValue);

    optionElement.appendChild(textNode);

    //把option挂接到id为city的select上面

    //document.getElementById("city").appendChild(optionElement);

    citySelectElement.appendChild(optionElement);

    }

    }

    ?

    }

    //解析xml文档的方法

    function parseXML(){

    try {

    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

    }

    catch (e) {

    try {

    xmlDoc = document.implementation.createDocument("", "", null);

    }

    catch (e) {

    alert(e.message);

    return;

    }

    }

    xmlDoc.async = false;

    xmlDoc.load("cities.xml");

    return xmlDoc;

    }

    1. 示例4：checkbox全选

    代码文件：代码\js\check1.html 代码\js\check2.html

    // <input type="button" name="checkall" id="checkall" value="http://www.mamicode.com/全选" />

    // <input type="button" name="checkall" id="checkallNo" value="http://www.mamicode.com/全不选" />

    // <input type="button" name="checkall" id="check_revsern" value="http://www.mamicode.com/反选" />

    // <input type="checkbox" name="checkItems" value="http://www.mamicode.com/全选/全不选"/>全选/全不选

    //全选

    document.getElementById("checkall").onclick=function(){

    //得到所有的name=items的input元素

    var items= document.getElementsByName("items");

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

    items[i].checked=true;

    }

    }

    //全不选

    document.getElementById("checkallNo").onclick=function(){

    var items = document.getElementsByName("items");

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

    items[i].checked=false;

    }

    }

    //反选

    document.getElementById("check_revsern").onclick=function(){

    var items = document.getElementsByName("items");

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

    if (items[i].checked) {//被选中了

    items[i].checked = false;//

    }

    else {

    items[i].checked = true;

    }

    }

    }

    //全选/全不选

    document.getElementsByName("checkItems")[0].onclick=function(){

    var items=document.getElementsByName("items");

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

    items[i].checked=this.checked;

    }

    }

    1. 总结

    1. 在逻辑运算中，0、""、false、null、undefined、NaN均表示false
    2. JS中的数组是可变长度的。

  8. 弹出窗口

    1：显示弹出窗口（一）

    语法：vReturnValue = http://www.mamicode.com/window . showModalDialog ( sURL， vArguments ， sFeatures )>

    参数说明：

    sURL--必选参数，用来指定对话框要显示的文档的URL。

    vArguments--可选参数，用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

    sFeatures--可选参数，用来描述对话框的外观等信息，可以使用一个或几个，用分号";"隔开。

    2：显示弹出窗口（二）

    window.opener 的用法

    window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为"name"的text中，就可以写为： window.opener.document.getElementById("name").value = "http://www.mamicode.com/输入的数据";

  9. 弹出窗口案例

    1. 显示弹出窗口

    关键代码：代码\js\弹出页面框\a1.html 代码\js\弹出页面框\a2.html

    l

    【a1.html】

    <script language="JavaScript">

    function openWin(){

    /*

    * 第一个参数 载入和显示的URL

    * 第二个参数 指定供显示文档时使用的变量。利用这个参数可以传递任何类型的值，包括包含多个值得的数组。

    * 对话框可以通过调用程序从 window 对象的 dialogArguments 属性提取这些值。

    * 常用windows对象

    * 第三个参数:指定对话框的窗口装饰

    */

    window.showModalDialog("./a2.html",window,‘dialogHeight:10;dialogWidth:20;help:no‘);

    }

    </script>

    <body>

    <form name="form1" action="test.html" method="post" >

    客户id: <input type="text" name="cid" value="" id="cid" ><br>

    客户名称<input type="text" name="cname" value="" id="cname" >

    <input type="button" name="ok" value="请选择客户" onclick="openWin();"/>

    </form>

    </body>

    【a2.jsp】

    <script language="JavaScript">

    function viewData(vid,vname){

    // alert(vid+" "+vname);

    // window.dialogArguments 封装的是a1.html页面的相关信息

    var a1Data = window.dialogArguments;

    //a1.html

    a1Data.document.getElementById("cid").value=vid;

    a1Data.document.getElementById("cname").value=vname;

    window.close();

    ?

    //a2.html

    //alert(document.getElementById("ss").value);

    ?

    }

    </script>

    <body>

    <table border="1">

    <tr>

    <td>操作</td>

    <td>客户id</td>

    <td>客户名称</td>

    </tr>

    ?

    <tr>

    <td><input type="button" value="选择" id="ss" onclick="viewData(‘001‘,‘深圳华为‘)"></td>

    <td>001</td>

    <td>深圳华为</td>

    </tr>

    <tr>

    <td><input type="button" value="选择" onclick="viewData(‘002‘,‘用友软件‘)"> </td>

    <td>002</td>

    <td>用友软件</td>

    </tr>

    </table>

    </body>

    1. 下拉框中添加数据

    【a1.html】

    <script language="JavaScript">

    ?

    function openWin(){

    window.showModalDialog("./a2.html",window,‘dialogHeight:10;dialogWidth:20;help:no‘);

    }

    /*

    * eduname值,是从a2传递过来的

    */

    function addOPtion(eduname){

    //<option value="http://www.mamicode.com/本科">本科</option>

    //创建option

    var optionElement=document.createElement("option");//<option></option>

    //设置属性和内置文本

    optionElement.setAttribute("value",eduname);//<option value="http://www.mamicode.com/本科"></option>

    //<option value="http://www.mamicode.com/本科">本科</option>

    var textOptionElement=document.createTextNode(eduname); optionElement.appendChild(textOptionElement);

    //挂接到select上

    var eduElement=document.getElementById("edu");

    eduElement.appendChild(optionElement);

    }

    </script>

    <body>

    <form name="form1" action="test.html" method="post" >

    <select edu="edu" id="edu">

    <option value="本科">本科</option>

    </select>

    <input type="button" name="ok" value="添加" onclick="openWin();"/>

    </form>

    </body>

    【a2.html】

    <script language="JavaScript">

    function setData(){

    var a1Data = window.dialogArguments;

    //得到父窗口

    //<input type="text" name="eduname" id="eduname" value="" size=8>

    var veduname=document.getElementById("eduname").value;

    a1Data.addOPtion(veduname);

    window.close();

    }

    /*第二种方式：

    function setData(){

    //得到父窗口

    var eduName=document.getElementById("eduname").value;

    var parentWindow=window.opener;

    parentWindow.setValue(eduName);

    window.close();

    }

    }

    */

    </script>

    <body>

    <table border="1">

    ?

    <tr>

    <td><input type="text" name="eduname" id="eduname" value="" size=8></td>

    <td><input type="button" name="ok" value="确定" onclick="setData();"></td>

    </tr>

    ?

    </table>

    </body>

  10. 基于JS的客户端验证

    源代码： 代码\js\js验证_正则表达式.html

    部分代码：

    <body>

    <p>员工信息录入</p>

    <form name="empForm" id="empForm" method="post" action="user.html">

    <table border=1>

    <tr>

    <td>真实姓名(不能为空 ,没有其他要求)</td>

    <td><input type="text" id="realname" name="realname" />

    </td>

    </tr>

    <tr>

    <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>

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

    </tr>

    <!-- ...... -->

    </table>

    </form>

    </body>

    <script language="JavaScript">

    document.getElementById("ok").onclick=function(){

    //真实姓名：id=realname

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

    if(realname==null||realname==""){

    alert("真实姓名不能为空");

    return false；

    }

    //登录名：id=username

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

    if(username==null||username==""){

    alert("登录名不能为空");

    return false；

    }

    //正则表达式使用方式一

    var pattern=new RegExp("^[a-zA-Z0-9\u4e00-\u9fa5]{5,8}$");

    var flag=pattern.test(username);

    if(!flag){

    alert("登录名不符合要求");

    }

    //正则表达式使用方式二:

    var pattern=/^[a-zA-Z0-9\u4e00-\u9fa5]{5,8}$/;//直接量的形式

    var flag=pattern.test(username);

    if(!flag){

    alert("登录名不符合要求");

    }

    //密码

    //......

    }

    </script>

    ?

    ?

    ?

  11. ★Ajax

    Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。AJAX并不是一项新技术，其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

    web的传统模式：服务端器返回整个页面????????数据在客户端和服务器之间独立传输

    ?

    不用刷新整个页面便可与服务器通讯的办法：

    Flash

    Java applet

    框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面

    隐藏的iframe

    XMLHttpRequest：该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。

  12. Ajax的技术的工作原理

    Ajax的核心是JavaScript对象XmlHttpRequest

    该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

    用户的浏览器在执行任务时即装载了AJAX引擎，AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

    AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

    AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

    服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

    XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择(给用户反馈)

    XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；

    DOM（Document Object Model,文档对象模型）实现动态显示和交互；

    使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

    使用JavaScript绑定和处理所有数据

  13. Ajax_XMLHttpRequest

    概述：

    常见属性

    ????readyState

    ????status

    ????response

    ????responseText????

    ????onreadysatatechange

    常见方法

    ????open(method,url,isAsync)

    ????send(requestData)

    通过XmlHttpRequest向服务器发送post请求

    服务器返回的数据：

    ????html

    ?

    1. XMLHttpRequest对象初始化

    function createXmlHttpRequest(){

    var xmlHttp;

    try{ //Firefox， Opera 8.0+， Safari

    xmlHttp=new XMLHttpRequest();

    }catch (e){

    try{ //Internet Explorer

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

    }catch (e){

    try{

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

    }catch (e){}

    }

    }

    return xmlHttp;

    }

    1. XMLHttpRequest对象方法

    abort()：停止当前请求

    getAllResponseHeaders()：把http请求的所有响应首部作为键/值对返回

    getResponseHeader("headerLabel")：返回指定首部的串值

    open("method"，"url")：建立对服务器的调用，method参数可以是GET，POST。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。????

    send(content)：向服务器发送请求

    setRequestHeader("label", "value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

    1. XMLHttpRequest对象属性

    onreadystatechange：状态改变的事件触发器

    readyState：对象状态(integer)，0表示未初始化，1表示读取中，2表示已读取，3表示交互中，4表示完成

    responseText：服务器进程返回数据会封装到此属性当中(文本版式)

    responseXML：服务器进程返回数据的交融DOM的XML文档对象

    status：服务器返回的状态码，如：404="文件未找到"、200="成功"

    statusText：服务器返回的状态文本信息

  14. Ajax开发框架

    AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容，只不过这个过程是异步的。

    A：对象初始化（见上面）

    B：指定响应处理函数

    指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：

    XMLHttpReq.onreadystatechange = processResponse;

    注意：这个函数名称不加括号，不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如：

    XMLHttpReq.onreadystatechange = function() { };

    // 处理返回信息的函数

    function processResponse() {

    }

    C：发出HTTP请求

    向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

    http_request.open(‘GET‘， ‘http://www.example.org/some.file‘， true);

    http_request.send(null)

    按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。

    注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：

    http_request.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded");

    这时资料则以查询字符串的形式列出，作为send的参数，例如：

    name=value&anothername=othervalue&so=on

    代码

    //发送请求

    function sendRequest(){

    //获取文本框的值

    var chatMsg=input.value;

    var url="chatServlet.do?charMsg="+chatMsg;

    //建立对服务器的调用

    XMLHttpReq.open("POST"，url，true);

    //设置MiME类别，如果用 POST 请求向服务器发送数据，

    //需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".

    //它会告知服务器正在发送数据，并且数据已经符合URL编码了。

    XMLHttpReq.setRequestHeader("Content-Type"， "application/x-www-form-urlencoded");

    //状态改变的事件触发器，客户端的状态改变会触发readystatechange事件，

    //onreadystatechange会调用相应的事件处理函数

    XMLHttpReq.onreadystatechange=processResponse;

    //发送数据

    XMLHttpReq.send(null);

    }

    D、处理服务器返回的信息

    处理响应处理函数首先要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

    if (http_request.readyState == 4) {

    // 信息已经返回，可以开始处理

    } else {

    // 信息还没有返回，等待

    }

    服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。

    if (http_request.status == 200) {

    // 页面正常，可以开始处理信息

    } else {

    // 页面有问题

    }

  • XMLHttpRequest对成功返回的信息有两种处理方式：
  • responseText：将传回的信息当字符串使用；
  • responseXML：将传回的信息当XML文档使用，可以用DOM处理。

代码

//处理返回信息的函数

function processResponse(){

if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成

if(XMLHttpReq.status==200){ //信息已经成功返回，开始处理信息

document.getElementById("chatArea").value=XMLHttpReq.responseText;

}

}

}

  1. 发送请求--方法和属性介绍

利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分：

  • onreadystatechange事件处理函数

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

在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。

每次readyState属性的改变都会触发readystatechange事件

  • open 方法

XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求。

method：请求类型，类似"GET"或"POST"的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。

在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。

url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

  • send 方法

    open方法定义了Ajax请求的一些细节。send方法可为已经待命的请求发送指令

    data：将要传递给服务器的字符串。

    若选用的是GET请求，则不会发送任何数据，给send方法传递null即可：request.send(null);

    当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.

    完整的Ajax的GET请求示例：

    //指定响应处理函数

    xmlHttpReq.onreadystatechange=function(){

    alert(xmlHttpReq.readyState+" "+xmlHttpReq.status);

    };

    //建立对服务器的调用

    xmlHttpReq.open("get"，"../registerServlet.do?username="+usernameValue，true);

    //发送指令

    xmlHttpReq.send(null);

    }

    使用get请求时send方法参数时null，如果传值的话，服务器也接受不到

  • setRequestHeader(header，value)

    当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是GET还是POST。

    Ajax请求中，发送首部信息的工作可以由setRequestHeader完成

    参数header：首部的名字;参数value：首部的值。

    如果用POST请求向服务器发送数据，需要将"Content-type"的首部设置为"application/x-www-form- urlencoded".它会告知服务器正在发送数据，并且数据已经符合URL编码了。

    该方法必须在open()之后才能调用

    完整的Ajax的POST请求示例：

    //指定响应处理函数

    xmlHttpReq.onreadystatechange=function(){

    alert(xmlHttpReq.readyState+" "+xmlHttpReq.status);

    };

    //建立对服务器的调用

    xmlHttpReq.open("post"，"../registerServlet.do"，true);

    xmlHttpReq.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded");

    //发送指令

    xmlHttpReq.send("username="+usernameValue+"&psw=888888");

    }

  1. 接收请求--方法和属性介绍

用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：readyState/status/responseText/responseXML

  • readyState

readyState属性表示Ajax请求的当前状态。它的值用数字代表。

0代表未初始化。还没有调用open方法

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

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

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

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

每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。

readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4

  • status

服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。

常用状态码及其含义：

404没找到页面(notfound)

403禁止访问(forbidden)

500内部服务器出错(internalserviceerror)

200一切正常(ok)

304没有被修改(notmodified)(服务器返回304状态，表示源文件没有被修改)

在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应

  • responseText

XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML，XML或普通文本，这取决于服务器发送的内容。

当readyState属性值变成4时，responseText属性才可用，表明Ajax请求已经结束。

//指定响应处理函数

xmlHttpReq.onreadystatechange=function(){

//对象的状态：4表示完成

if(xmlHttpReq.readyState==4){

if(xmlHttpReq.status==200||xmlHttpReq.status==304){

//开始处理信息

alert(xmlHttpReq.responseText);

}

}

};

  • responseXML

    如果服务器返回的是XML，那么数据将储存在responseXML属性中。

只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。服务器端返回的MIME类型必须为text/xml

  1. 示例1：测试与服务器的通信（get）

html源码：代码\js\ajax_测试与服务器的通信.html

相应数据源：代码\js\ServletDemo1.java

步骤：

  1. 创建XmlHttpRequest对象，是固定写法
  2. 注册状态变化的事件处理
  3. 初始化xhr对象
  4. 向服务器发送数据

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>AJAX进行get方式的请求测试</title>

</head>

<body>

<input type="button" id="b1" name="b1" value="测试与服务器的通信"/>

<div id="d1"> </div>

<script type="text/javascript">

window.onload=function(){//当页面被全部加在完毕后再执行

//给b1按钮注册事件

document.getElementById("b1").onclick=function(){

//AJAX代码

//1、得到XmlHttpRequest对象

var xhr = createXmlHttpRequest();

/*onreadystatechange:该事件是由服务器触发，而不是用户。在Ajax执行过程，

服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。

改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会

触发readystatechange事件

*/

//xhr的readyState改变都会触发onreadystatechange事件

/* readyState的取值：

* 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

* 1 (初始化) 对象已建立，尚未调用send方法

* 2 (发送数据) send方法已调用，但是当前的状态及http头未知

* 3 (数据传送中) 已接收部分数据，因为响应及http头不全，

* 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

*/

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

//真正的处理

if(xhr.status==200||xhr.status==304){

//status==200，status==304表示服务器正确返回

var data = xhr.responseText;//服务器返回的数据：.responseText

//★把返回的数据写到div中（自己写）

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

}

}

}

//2、建立与服务器的连接

/*

* oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

* bstrMethod:请求方式。一般使用get或post

* bstrUrl:请求的资源地址：可以绝对或相对路径

* varAsync:是否是异步请求。默认是true。

*/

xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime());

//3、发送数据

//oXMLHttpRequest.send(varBody); varBody:请求参数

xhr.send(null);

//4、接收服务器返回的数据

}

}

function createXmlHttpRequest(){

var xmlHttp;

try{ //Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}catch (e){

try{ //Internet Explorer，提供不同的浏览器版本

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

}catch (e){

try{

//提供不同的浏览器版本

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

}catch (e){}

}

}

return xmlHttp;

}

</script>

</body>

  1. 示例2：post请求

如果选用get请求，则不会发送任何数据。给send方法传递null即可。当向send方法提供参数时，要确保open中指定的方法是post，如果没有数据作为请求体的一部分发送，则使用null。

????如果用post请求向服务器发送数据，需要将"Content-type"的首部设置为"application/x-www.form-urlencodec"

源码：代码\js\ajax_post请求.html 代码\js\ServletDemo2.java

<script type="text/javascript">

window.onload=function(){

document.getElementById("b1").onclick = function(){

//。。。。。。

//初始化xmlhttpRequest对象，即open

xhr.open("POST", "/ajaxday02/servlet/ServletDemo2?time=" + new Date().getTime());

//设置请求消息头，告知服务器，发送的正文数据的类型。

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

//发送数据

xhr.send("username=admin&password=123");

}

}

function createXmlHttpRequest(){

//。。。。。。 }

</script>

  1. 示例3：登陆案例

html源码： 代码\js\ajax_登陆案例.jsp

相应数据源： 代码\js\ServletDemo3.java

<script type="text/javascript">

window.onload=function(){

document.getElementById("checkusername").onclick=function(){

var xhr = createXmlHttpRequest();

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200 || xhr.status==304){

var data = xhr.responseText;

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

}

}

}

//参数：请求方式，请求地址

xhr.open("POST","${pageContext.request.contextPath}/servlet/ServletDemo3?time="+

new Date().getTime());

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

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

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

}

}

function createXmlHttpRequest(){ //…… }

</script>

  1. 数据格式提要

    在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：XML/JSON/HTML

    1. HTML

    HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。不必从responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

    插入HTML代码最简单的方法是更新这个元素的innerHTML属性

  • 优缺点

    优点：

    从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

    HTML 的可读性好。

    HTML 代码块与 innerHTML 属性搭配，效率高。

    缺点：

    若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适

    innerHTML 并非 DOM 标准。

  1. XML优缺点

优点：

XML 是一种通用的数据格式。

不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。

利用 DOM 可以完全掌控文档。

缺点：

如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。

当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂

  1. JSON

  • JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
  • 解析JSON

    JSON只是一种文本字符串。它被存储在responseText属性中。为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。函数eval会把一个字符串当作它的参数。然后这个字符串会被当作JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的，所以它本身是可执行的。

    示例：

    //开始处理信息

    var jsonResponse=xmlHttpReq.responseText;

    //处理信息

    var provinceJson=eval("("+jsonResponse+")");

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

    alert("pid= "+provinceJsons[i].pid);

    alert("pname "+provinceJsons[i].pname);

    }

  • JSON的规则

    对象是一个无序的"‘名称/值‘对"集合。一个对象以"{"（左括号）开始，"}"（右括号）结束。每个"名称"后跟一个":"（冒号）；"‘名称/值‘对"之间使用"，"（逗号）分隔。

规则如下:

1) 映射用冒号("：")表示。名称:值

2) 并列的数据之间用逗号("，")分隔。名称1:值1，名称2:值2

3) 映射的集合(对象)用大括号("{}")表示。{名称1:值1，名称2:值2}

4) 并列数据的集合(数组)用方括号("[]")表示。即：看到[]是数组，看到{}表示对象

[

{名称1:值，名称2:值2}，

{名称1:值，名称2:值2}

]

5) 元素值可具有的类型：string， number， object， array， true， false， null

  • JSON的优缺点

    优点：

    作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。

    JSON 不需要从服务器端发送含有特定内容类型的首部信息。

    缺点：

    语法过于严谨

    代码不易读

    eval 函数存在风险

?

例1：JS处理JSON，与java中的一般类对象使用相比较

/*在java中

public class Person{

private String name;

private String gender;

getter setter...

}

在其他类中使用Person

Person p = new Person();

p.getName();

p.getGender();

*/

//利用json格式表示一个人的信息，与上面的java类比较

//name、gender加不加""都是一样的

var person = {name:"zhangsan","gender":"male"};

alert(person.name);//直接弹出zhangshan

alert(person.gender);

例2：使用Json格式表示多个人的信息

<script language="JavaScript">

var people =[

????{"firstName": "Brett"，"email": "brett@newInstance.com" }，

{"firstName": "Mary"，"email": "mary@newInstance.com" }

];

alert(people[0].firstName);

alert(people[0].email);

alert(people[1].firstName);

alert(people[1].email);

</script>

例3：

var people ={

"programmers": [

{ "firstName": "Brett"， "email": "brett@newInstance.com" }，

{ "firstName": "Jason"， "email": "jason@servlets.com" }，

{ "firstName": "Elliotte"， "lastName":"Harold"， "email": "elharo@macfaq.com" }

]，

"authors": [

{ "firstName": "Isaac"， "genre": "science fiction" }，

{ "firstName": "Tad"， "genre": "fantasy" }，

{ "firstName": "Frank"， "genre": "christian fiction" }

]，

"musicians": [

{ "firstName": "Eric"， "instrument": "guitar" }，

{ "firstName": "Sergei"， "instrument": "piano" }

]};

window.alert(people.programmers[1].firstName);

window.alert(people.musicians[1].instrument);

例5：表示一个人的"迭代"信息

var people ={

"username":"mary"，

"age":"20"，

"info":{"tel":"1234566"，"celltelphone":788666}，

"address":[

{"city":"beijing"，"code":"1000022"}，

{"city":"shanghai"，"code":"2210444"}

]

};

window.alert(people.username);

window.alert(people.info.tel);

window.alert(people.address[0].city);

JSON_LIB

//转换javaBean到json格式:

JSONObject jsonObject=JSONObject.fromObject(javabean);

System.out.println(jsonObject.toString());

//转化list集合中javaBean--->json格式

JSONArray jsonArray = JSONArray.fromObject(list);

String jsonStr = jsonArray.toString();

//JSON串过滤

JsonConfig jsonConfig=new JsonConfig();

jsonConfig.setExcludes(new String[]{"pname"});

JSONArray jsonArray=JSONArray.fromObject(list，jsonConfig);

  1. 对比小结

  1. 若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单的
  2. 如果数据需要重用，JSON文件是个不错的选择，其在性能和文件大小方面有优势
  3. 当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的"世界语"

?

  1. 示例：省市级联_json字符串

domain实体代码：代码\js\ajax省市级联\Province.java

Servlet代码：代码\js\ajax省市级联\ServletDemo4.java

//从数据库查询出所有的省份

@WebServlet("/ServletDemo4")

public class ServletDemo4 extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

List<Province> ps = new ArrayList<Province>();//new对象

????????//添加数据

ps.add(new Province("安徽省", "001"));

ps.add(new Province("浙江省", "002"));

ps.add(new Province("江苏省", "003"));

????????//定义显示格式

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

?

JsonConfig cfg = new JsonConfig();

cfg.setExcludes(new String[]{"zipcode"});

JSONArray jsonArray = JSONArray.fromObject(ps, cfg);

out.write(jsonArray.toString());

}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request,response);

}

}

javabean代码(单元测试类)：代码\js\ajax省市级联\JSONlibTest.java

要添加json相关的jar包：代码\js\ajax省市级联\json及依赖的jar包

public class JSONlibTest {

@Test

public void test1() {

Province p = new Province("山东省","250000");

//将普通类对象转变为json对象

JSONObject jsonObj = JSONObject.fromObject(p);

//将json对象转变为字符串

System.out.println(jsonObj.toString());

}

@Test

public void test2() {

List<Province> ps = new ArrayList<Province>();

ps.add(new Province("安徽省", "001"));

ps.add(new Province("浙江省", "002"));

ps.add(new Province("江苏省", "003"));

JSONArray jsonArr = JSONArray.fromObject(ps);

System.out.println(jsonArr.toString());

}

@Test

public void test3() {

List<Province> ps = new ArrayList<Province>();

ps.add(new Province("安徽省", "001"));

ps.add(new Province("浙江省", "002"));

ps.add(new Province("江苏省", "003"));

JsonConfig cfg = new JsonConfig();//JSON串过滤

cfg.setExcludes(new String[]{"zipcode"});//不包含的字段列表

JSONArray jsonArr = JSONArray.fromObject(ps,cfg);

System.out.println(jsonArr.toString());

}

}

  1. js测试代码方法：（源：省市级）

    1. 数据源来自servlet

    技巧：在工程中只运行servlet（servlet代码被当成是数据库）

    写好servlet后直接在浏览器中输入servlet路径：

    ????

    在控制台打印出相应数据

    ????

    简单示例

    源码：代码\js\ServletDemo4.java 代码\js\ajax_省市级联_Json.jsp

    <script type="text/javascript">

    window.onload=function(){

    //得到服务器返回的xml文件

    var xhr = createXmlHttpRequest();

    xhr.onreadystatechange=function(){

    if(xhr.readyState==4){

    if(xhr.status==200||xhr.status==304){

    var xmlDoc = xhr.responseXML;????//返回的是一个对象，不要用字符串形式

    //把省份的下拉菜单搞定

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

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

    //创建jsp中option。DOM编程

    var optionElement = document.createElement("option");//<option></option>

    optionElement.setAttribute("value",xmlProvinceElements[i].getAttribute ("name"));

    var textNode =document.createTextNode(xmlProvinceElements[i]. getAttribute ("name"));

    optionElement.appendChild(textNode);

    document.getElementById("province").appendChild(optionElement);

    }

    }

    }

    }

    xhr.open("GET","/ajaxday02/servlet/ServletDemo4?time="+new Date().getTime());

    xhr.send(null);

    }

    function createXmlHttpRequest(){/* 。。。。。。*/}

    </script>

    1. javabean

    参见：示例：省市级联_json字符串


联系
我们