Ajax-知识点基础（二）

Ajax复习：

1.为什么使用ajax

Ajax是只刷新局部页面的技术，即 Asynchronous JavaScript And XML，是一种构建Web页面的方法，使页面像桌面应用一样具有相应行和交互性。

Asynchronous JavaScript And XML

Asynchronous异步：发送请求后不等返回结果，由回调函数处理结果。

JavaScript：向服务器发起请求，获得返回结果，更新页面。

XML：封装数据。

总之：使用JavaScript从服务器获取数据而不必刷新整个页面。

2.XMLHttpRequest对象

XMLHttpRequest是Ajax开发的基础，它提供了客户端与服务器端进行异步通信的能力。一方面它向服务器提交一个请求，获取指定页面的内容；另一方面将指定的数据通过JavaScript提交到服务器端并需要的方式对数据进行处理，结合XML与CSS，做出各种应用程序。

并不是所有的浏览器中使用的都叫XMLHttpRequest,需要根据不同的浏览器创建对象。XMLHttpRequest对象不是一个国际标准。在不同浏览器中有不同的实现。要实现能够跨越浏览器运行的Ajax应用，必须考虑所有的使用场合。使用时必须根据浏览器采用不同的语法进行创建。但对每一个都进行判断不合实际，可以利用JavaScript的异常处理机制实现跨浏览器的XMLHttpRequest对象创建脚本。

var xmlhttp;
try{
     xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
      try{
xmlhttp= new   ActiveXObject('Microsoft.XMLHTTP');
      }catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
      }
}

3.构建Ajax应用

步骤：

①创建XHR对象

②创建Ajax请求

③发送Ajax请求

④处理服务器响应

常用方法：

open(method , url , asynchronous , user , password);创建请求

send(body);发送请求

onreadystatechange事件

readyState属性判断请求状态

status存储服务器端返回的HTTP响应代码，它代表请求的处理结果.

XHR对象可以接收服务器返回的文本片段和XML文档，分别保存在responseText与responseXML属性中。

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
    //使用readyState属性判断请求状态,对服务器响应数据进行处理
    if(xmlhttp.status==200){
        //捕捉文本
        alert(xmlhttp.responseText);
        //获取xml对象
        var xmlObj=xmlhttp.responseXML;
        //获取第一个title标记内容
        var title=xmlObj.getElementsByTagName("title")[0].text;
        //输出信息
        alert("XML:\n" + xmlObj.xml + "\n" + "第一个title标记内容为：" + title);
    }else{
        alert(xmlhttp.status);
    }
}
}

二、设计Ajax应用

1.何时使用ajax

传统的web应用同步请求发生时，用户会等待新的页面加载，页面数据量大就会产生短暂的空白期。当你想同时做多件事情时，就应该考虑使用Ajax。比如你想登录时验证用户名是否重复的同时，想继续填写其它内容；

传统web处理请求时多采用资源跳转的方式到达新资源然后响应给客户端。Ajax在响应时服务器响应给客户端的是包含各种内容的字符串。

2.JS事件处理

JavaScript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。

JavaScript浏览器事件有一下：

onload : 浏览器载入文档事件

onunload : 关闭该文档事件

onblur : 浏览器失去焦点事件

onfocus : 获得焦点事件

需取当前文本框对象(使用document.getElementById(‘文本框id’)方法获取)，使用文本框对象.value属性获取内部写入的值。

为同一事件添加多个事件处理程序，只会执行最后一个事件处理程序。

三、DOM

DOM是一个表达XML文档的标准(由W3C制定的)。

主要包括：

核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等）
与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）
浏览器对象（window、location、history、navigator 等）
文档对象（document、images、form 等）

节点类型数值	节点类型	附加说明	实例
1	元素(Element)	HTML标记元素	<h1>…</h1>
2	属性(Attribute)	HTML标记元素的属性	color="red"
3	文本(Text)	被HTML标记括起来的文本段	Hello World!
8	注释(Comment)	HTML注释段	<!--Comment-->
9	文档(Document)	HTML文档根文本对象	<html>
10	文档类型(DocumentType)	文档类型	<!DOCTYPE HTML PUBLIC"…">

getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()

四、常用框架

1.为什么使用框架

不必自己重新编写代码，可以直接使用框架方法。其次，框架通常会为你考虑跨浏览器问题，不必担心你的JS代码在不同浏览器下的执行。这是我们使用框架的一个重要原因。

2.使用框架的步骤

引入框架的js文件、调用框架中定义的Ajax方法

<script language="jvavascript" src="jquery.min.js"></script>

jquery使用Ajax:

$.ajax({
     url: "my.do",         //ajax请求的服务器地址
     method："post",       //ajax请求发送方式
     data:"name=tom",       //ajax请求发送的数据
     success：function(respText){
        //回调函数，服务器返回的内容自动传给回调函
        alert(respText);               
        //数的参数
     }
});

3.Jquery选择器：

$("#showDiv")：id选择器，相当于JavaScript中的document.getElementById(“#showDiv”);

$(".SomeClass")：类别选择器，选择CSS类型为”SomeClass”的所有节点元素

$("p:odd")：选择所有位于奇数行的<p>标记。

$("td：nth-child(1)")：所””有表格行的第一个单元格，即第一列

$("li>a")：子选择器，返回<li>标记的所有子元素<a>，不包括孙标记    

$("a[href$=pdf]")：选择所有的超链接，并且这些超链接的href属性是以pdf结尾的

4.JS解析XML

<person>
  <name>admin</name>
  <sex>女</sex>
  <phone>13312341234</phone>
  <address>济南市中区</address>
</person>

//响应的xml字符串
var s = xmlhttp.responseXML;
//获取所有的person标签对象
var allPersons=xmlDoc.getElementsByTagName(“person”);

var currentPerson;
for(var i=0;i<allPersons.length;i++){
currentstate=allPersons [i];
 //person的第一个子节点是name
 alert(currentPerson.childNodes[0].nodeValue);
}

5.Ajax服务器端JSON生成

所必须的包有：

commons-httpclient-3.1.jar

commons-lang-2.4.jar

commons-logging-1.1.1.jar

json-lib-2.4-jdk15.jar

ezmorph-1.0.6.jar

commons-collections-3.2.1.jar

①Bean转JSON:

User u = new User();
u.setAge(22);
u.setUsername("hzucmj");
u.setEnabled(true);

JSONObject json = JSONObject.fromObject(u);
System.out.println(json.toString());
 //结果为：{"enabled":true,"username":"hzucmj","age":22}

②List转JSON

List<Object> list = new ArrayList<Object>();
list.add(u1);
list.add(u2);
JSONArray json = JSONArray.fromObject(list);
System.out.println(json.toString());

③Map转JSON：

HashMap<String, Comparable> map = new HashMap<String, Comparable>();
map.put("name", "hzucmj");
map.put("age", 22);
JSONObject json = JSONObject.fromObject(list);
System.out.println(json.toString());

五：表单验证和表单提交方式

1.为什么要表单验证

脚本在客户端执行，减轻服务器端的压力。

在表单上为电话不能超过13位等校验。

Ajax-知识点基础（二）

猜你喜欢