第12章 Ajax和Json数据

1、Ajax Ajax 概述 Ajax原理¤ 注册时存在问题¤ 什么是Ajax 异步的javaScript和Xml AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest独享异步地想服务器放松请求。 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容。¤ Ajax工作原理¤ 如何获得Ajax对象代码如下function getXhr()var xhr = null;if(window.XMLHttpRequest)xhr = new XMLHttpRequest();elsexhr = new Acti

2、veXObject( Microsoft.XMLHttp );return xhr; Ajax对象属性方法¤ 异步对象的属性和方法¤ onreadystatechange onreadystatechange：绑定一个事件处理函数，该函数用来处理onready -change事件。 注意：当Ajax对象的readyState的值发生了改变，比如，从0变成1，就会产生readystatechange事件。¤ readyState readyState：一共有5个值，分别是0,1,2,3,4 ,分别表示Ajax对象与服务器通信的状态。 使用Ajax发送异步请求

3、4; 发送异步请求的步骤 获取Ajax对象：获取XMLHttpRequest 设置回调函数：为Ajax对象的onreadystatechange事件设定响应函数function fn()if(xhr.readyState = 4 && xhr.satus = 200 )var txt = xhr.responseText;/相应的DOM操作. . 创建请求：调用XMLHttpRequest对象的open方法xhr.open( get , xx.do , true ); 注意： true:表示发送异步请求(当Ajax对象发送请求时，用户仍然可以对当前页面做其他的操作)。 fals

4、e：表示发送同步请求(当Ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作)。xhr.open( post , xx.do , true );xhr.setRequestHeader(content-type,application/x-www-form-urlencoded); setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须要有content-type消息头，但是默认情况下xhr中不会添加该消息头，所以，需要我们调用setRequsetHeader方法，添加这个消息头。 发送请求：调用Ajax对象的send方法GET 请求：xhr

5、.send(null)POST请求：xhr.send(name=value & name=value.) GET请求：- send方法内传递null- 若要提交数据，则在open方法的”URL”后面追加- 如：xhr.open( “get” , “xx.do?name=value&name=value” ,true )¤ 编写服务器代码 服务器返回的一般是部分数据，比如一个简单的文本。¤ Ajax的应用 输入的值需要检验，如检测注册的用户名是否已被占用 搜索时出现的自动提示列表 级联显示 数据录入和列表显示在同一个页面 不需要刷新的翻页 jQuery对AJA

6、X的支持¤ load() 作用：将服务器返回的数据字节添加到符合要求的节点之上 用法： $obj.load( 请求地址 ， 请求参数); 请求参数- “username=tom&age=23”- usernaem:tom , age:22 - 有请求参数时，load方法发送POST请求，否则发送GET请求¤ get() 作用：发送GET类型的请求 用法：$.get( 请求地址，请求参数，回调函数，服务器返回的数据类型 ) 说明：- 回调函数添加的参数是服务器返回的数据- 服务器返回的数据类型：html ：html文本text ：文本JSON ：js对象xml ：xm

7、l文档script ：javaScript脚本¤ ajax() 用法 ：$.ajax( ); 内可以设置的选项参数：- url ：请求地址- type ：请求方式- data ：请求参数- dataType ：服务器 返回的数据类型- success ：服务器处理正常对应的回调函数- error ：服务器出错对应的回调函数- async ：true（默认），当值为false时发送同步请求Json JSON 概述 JSON简介¤ 什么是JSON¤ 与平台无关的数据交换¤ 轻量级的解决 JSON语法¤ JSON的结构 JSON主要分两种结构:- “

8、名称/值”对的集合，不同的语言理解为对象、记录、结构、字典、哈希表等。- 值的有序列表，大部分语言中理解为数组¤ 使用JSON表示一个对象 属性名：属性值 , 属性名：属性值 . 注意- 属性值可以是string , number , boolean(true,false) , null , object- 属性名必须使用双引号引起来- 属性值如果是字符串，必须用双引号括起来¤ 使用JSON表示一个数组 JSON表示数组的语法是 value , value , value vlaue可以是简单数据类型，也可以是object、数组类型 例如数组 表示方式“name” : ”J

9、erry” , “age” : 23 ,“name” : “Tom” , “age” : 25 对象 表示方式“name” : ”ROSE” ,“hobby” : “sing”,”dance”,”eat” 使用JSON实现数据交换 数据交换¤ 数据交换原理¤ JSON字符串 -> JavaScript对象方法一： 使用JavaScript语言的原生函数：eval()- 例如var str = “name”:”张三” , “age”:24 ;var obj = eval( “(“+str+”)” ) ;alert () ; 但该方法有风险，需谨慎使用方法二： 使用原生对象JSON提供的parse()方法- 例如var str = “name”:”张三” , “age”:24 ;var obj = JSON.parse( str ) ;alert () ; 如果该对象无效，说明浏览器版本太低方法三： 使用JSON.js文件为字符串增加的方法var str = “name”:”张三” , “age”:24 ;var obj = str.parseJSON()