Ajax、json学习笔记

本学习笔记参考传智播客冯威老师的Ajax视频记录。

一、Ajax

(1) 同步和异步

同步: 发送方发送数据后，等待接收方返回响应后才发下一个数据包的方式。

异步: 发送方发送数据后，不等待接收方返回响应，接着发送下个数据包的方式。

(2) 什么是Ajax

Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

即一种不用刷新整个页面便可以与服务器通讯的办法。

(3) Ajax一些案例

1) google suggest

2) goole Maps

(4) Ajax原理

1） 核心对象 XmlHttpRequest

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

AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
使用AJAX，可以为JSP、开发人员、终端用户带来可见的便捷。

(5)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绑定和处理所有数据

(6) Ajax 缺陷
AJAX不是完美的技术。也存在缺陷：

1
AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

2
AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3
对流媒体的支持没有FLASH、Java Applet好。

4
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

(7)XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.
创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

Internet Explorer把XMLHttpRequest实现为一个ActiveX对象

其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

相关代码参考:

接收文本
<script type="text/javascript">

var xmlHttp;//Ajax核心对象名称

var createXMLHttpRequest = function(){

if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();//非IE内核

}else{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE内核

}

}

var showMsgCallback = function(){

if(xmlHttp.readyState == 4){//数据返回完毕

if(xmlHttp.status == 200){//接收返回内容

var text = xmlHttp.responseText;

document.getElementById("msg").innerHTML = text;

}

}

}

var showMsg = function(){

createXMLHttpRequest();

xmlHttp.open("POST","content.html");

//设置请求完成之后的处理回调函数

xmlHttp.onreadystatechange = showMsgCallback;

xmlHttp.send(null);//发送请求，不带任何参数

}

</script>
接收xml

var xmlHttp;

var createXMLHttp = function() {

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else {

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

}

}

window.onload = function(){

createXMLHttp();

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4){

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

var xmlDoc = xmlHttp.responseXML;

//获取省的元素

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

// alert(provinceElements.length);

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

var provinceElement = provinceElements[i];

var attrname = provinceElement.getAttribute("name");

var optionElement = document.createElement("option");

optionElement.setAttribute("value",attrname);

var textElement = document.createTextNode(attrname);

optionElement.appendChild(textElement);

/*

* <select id="province" name="province">

* <option value="">请选择</option>

* </select>

*/

var p = document.getElementById("province");

p.appendChild(optionElement);

}

/*

* <select id="id" name="city">

<option value="">请选择......</option>

</select>

*/

// 获取城市

var cityElements = xmlDoc.getElementsByTagName("city");

// alert(cityElements.length);

for(var j = 0;j < cityElements.length;j ++){

var cityElement = cityElements[j];

var attrname = cityElement.getAttribute("name");

var optionElement = document.createElement("option");

optionElement.setAttribute("value",attrname);

var textElement = document.createTextNode(attrname);

optionElement.appendChild(textElement);

var p = document.getElementById("id");

p.appendChild(optionElement);

}

}

}

}

xmlHttp.open("post","/MyFirstWeb/servlet/XmlFileServlet",true)

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

xmlHttp.send(null);

}

xml文件可以来自数据库，这是我们就可以使用工具将数据库取出的xml数据转换成xml格式的文档。如dom，jdom，dom4j。其中涉及的Servlet类再次省略。其他的方法和属性，可以参考Ajax API文档，再次只上常用的代码。

二 json

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

2、JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

3、规则如下:

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

4、代码:

(1) 基本格式写法:

// 实例一：单个对象

/* var person = {"name":'张三',"age":'21',"add":'昆明'};

alert(person.name);

alert(person.age);

alert(person.add);

*/

// 实例二：多个对象，用数组[]，对象之间用逗号隔开，访问时下标从0开始

/*

var person = [

{"name":'张三',"age":'21',"add":'昆明'},

{"name":'李四',"age":'20',"add":'上海'},

{"name":'王五',"age":'40',"add":'南京'},

{"name":'赵敏',"age":'25',"add":'广州'},

{"name":'李亮',"age":'31',"add":'北京'},

]

alert(person[0].add);

alert(person[2].name);

alert(person[4].age);

*/

//实例三：嵌套

/*

var person = { "params":

[

{"name":'张三',"age":'21',"add":'昆明'},

{"name":'李四',"age":'20',"add":'上海'},

{"name":'王五',"age":'40',"add":'南京'},

{"name":'赵敏',"age":'25',"add":'广州'},

{"name":'李亮',"age":'31',"add":'北京'},

]

}

alert(person.params[3].add);

*/

/* var person = { "params1":

[

{"name":'张三',"age":'21',"add":'昆明'},

{"name":'李四',"age":'20',"add":'上海'},

{"name":'王五',"age":'40',"add":'南京'},

{"name":'赵敏',"age":'25',"add":'广州'},

{"name":'李亮',"age":'31',"add":'北京'},

],

"params2":

[

{"name":'黎明',"age":'24',"add":'昆明'},

{"name":'科比',"age":'26',"add":'普洱'},

{"name":'韦德',"age":'41',"add":'景洪'},

{"name":'李兴',"age":'28',"add":'天津'},

{"name":'赵红',"age":'39',"add":'宁波'},

],

"params3":

[

{"name":'黄玉',"age":'17',"add":'深圳'},

{"name":'李阳',"age":'28',"add":'海口'},

{"name":'小红',"age":'31',"add":'北海'},

{"name":'小名',"age":'29',"add":'南宁'},

{"name":'宝宝',"age":'36',"add":'辽宁'},

]

}

alert(person.params3[2].name);

*/

//实例四：综合

var person = {

"name":"张无忌",

"tel":{

"tel":"0879-2156430",

"call":"152881xx715"

},

"address":[

{"home":"北京","code":'11124'},

{"com":"南京","code":'11125'}

]

}

alert(person.address[1].com);

</script>

(2) json 与 Ajax

代码:
Html页面:

<script type="text/javascript">

var xmlHttp;

var createXMLHttp = function() {

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else {

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

}

}

window.onload = function(){

createXMLHttp();

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

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4){

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

var data = xmlHttp.responseText;

// alert(data);

var dataObj = eval("("+ data +")");//函数eval()会把字符串当做它的参数，然后这个字符串会被javaScript代码来执行。

// alert(dataObj)

alert(dataObj.pid +""+dataObj.pname );

/*

for(var k = 0;k < dataObj.length;k ++){

alert(dataObj[k].pid + "\t" + dataObj[k].pname);

}

*/

}

}

}

xmlHttp.open("post","/MyFirstWeb/servlet/JsonServlet?timeStamp="+new Date(),true);

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

xmlHttp.send(null);

}

}

</script>

</head>

<body>

<select id="province" name="privince">

<option value="">请选择.....</option>

</select>

<input type="button" value="提交" name="ok" id="ok"/>

</body>

Servlet

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

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

PrintWriter out = response.getWriter();

/*String privence = "[{'pid':1,'pname':'云南省'},{'pid':2,'pname':'四川'},{'pid':3,'pname':'贵州'}]";

out.print(privence);*/

// 在实际开发中，后台数据一般以list集合给出

/*

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

Province p1 = new Province(1,"云南省");

Province p2 = new Province(2,"湖南省");

Province p3 = new Province(3,"湖北省");

Province p4 = new Province(4,"江苏省");

Province p5 = new Province(5,"河南省");

list.add(p1);

list.add(p2);

list.add(p3);

list.add(p4);

list.add(p5);

JsonConfig config = new JsonConfig();//屏蔽某些字段，比如，屏蔽pid

config.setExcludes(new String []{"pid"});

JSONArray jsonarray = JSONArray.fromObject(list,config);

out.print(jsonarray.toString());

*/

//一个对象转化为json格式

Province p6 = new Province(7,"海南");

JSONObject jsonobj = JSONObject.fromObject(p6);

out.print(jsonobj.toString());

}