Ajax与JSON-CFANZ编程社区

Ajax与JSON

一、Ajax简介

Asynchronous Javascript And Xml[异步javascript和xml]，在传统的Web开发中,与服务器进行通信主要是通过同步请求的方式(即刷新页面)来实现,如果同步请求的次数过于频繁,就会产生大量无用、重复的数据占用带宽。

Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件,在不需要刷新页面的情况,与服务器保持异步通信和联系,服务器根据需要进行最小化响应,而不是完整页面的重复发送。

同步：浏览器发送一个请求到服务器端，网址会改变，页面会被重新加载到浏览

异步：浏览器发送一个请求到服务器端，网址不会改变，并且页面只是局部刷新页面。Ajax使用异步的方式从浏览器发送请求，请求服务器端资源，并获得内容。

二、XMLHttpRequest

XMLHttpRequest对象用于与服务器交换数据。所有的浏览器都聚有内置的XMLHttpRequest对象。XMLHttpRequest使用异步的方式来与服务器交换数据，这使的我们可以只更新网页中需要更新的部分，就不需要更新整个网页。

在客户端与服务器进行通信前，首先实例化一个XMLHttpRequest对象。

语法如下：

var  httpRequest = new  XMLHttpRequest();

在使用XMLHttpRequest对象时，不允许跨域访问的，也就是说，只能访问自己站点内的文件。例如，www.sina.com.cn 站点中的文件不能去调用www.tom.com网中的文件。

常用方法：

方法名	说明	参数
Open(method,url,asyns)	规定请求类型，URL以及是否异步处理请求	参数：method 发送的请求类型，get或是post url 请求的文件 asyns true为异步，false时为异步
Send()	将请求发送到服务器用于get请求
Send(String)	将请求发送到到服务器	参数String ：传递值=值对，只用于post请求
about()	取消当前的请求
getAllResponseHeaders()	返回标题信息
getResponseHeader()	返回特定的标题信息
setRequestHeader(header, value)	将Http标头设置为请求	header：指定标头名称 value:指定标头

onreadystatechange事件

当请求由XMLHttpRequest对象发送到服务器后，服务器会做出响应。

当服务器的响应后，XMLHttpRequest对象的readyState属性就会发生改变，当此属性改变时就会触发此事件。readyState属性保存的是XMLHttpRequest对象的状态信息。

XMLHttpRequest对象的三个重要属性

onreadystatechange属性：他的值是一个函数，每当readState发生改变时，就执行这个属性指定的函数

readyState属性：此属性中保存有XMLHttpRequest的状态信息。共有五种状态。

0.请求未初始化

1.服务器连接已建立

2.请求已接收

3.请求处理中

4.请求已完成，且响应已经就绪

Status属性：值为200时，找到了请求页面，请求成功。

值为404时，未找到页面。

其它属性

responseText：以字符串形式返回响应数据

responseXML：将响应数据作为XML数据返回

statusText：返回状态文本（例如，“OK”或“NOT Found”）

XMLHttpRequest对象对新旧浏览器的创建方式也不一样，具体创建方法如下

var  httpRequest;
if (window.XMLHttpRequest) {
    // 目前主流的浏览器(Chrome, Mozilla, Safari, IE7+, ...)
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // <= IE 6 或早期IE版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

三、Ajax使用实例

1.get请求

var  httpRequest = new  XMLHttpRequest();
httpRequest.open("GET", "ajax_get.jsp", true);//这句可能返回缓存中的数据
                                    //建议用下面的语句
httpRequest.open("GET","ajax_get.jsp?r="+ Math.random(), true);//加入一随机数次url都不一样，这样可保证不会返回缓存中的数据。
httpRequest.send(); //上面写好后，用send方法发到服务器。 

当使用Get请求时url中在？号后面可以加入参数。
httpRequest.open("GET", "ajax_get.jsp?name=zhangSan&sex=男", true);

2.post请求

httpRequest.open("POST", "ajax_post.jsp", true); //要请求的网页
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//配置http头
httpRequest.send("fname=Seagull&lname=Anna"); //要一起发送的参数和值
//上面写好后，用send方法发到服务器。

上面第二句中setRequestHeader()方法接受两个参数：

参数1：指定标题名称

参数2：指定标题值

3.回调函数

httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("divTable").innerHTML = this.responseText;
  }
};

4.总结使用步骤

(1) 创建XMLHttpRequest对象，要注意区分新旧浏览器

(2) 配置回调函数。

(3) 创建对服务器的请求，这里要注意是如果用post方式，那要配置http头。

(4) 配置http头

(5) send方法，把上面配置好的发送到服务器。

5.使用例子

//1.创建对象
var  httpRequest;
if (window.XMLHttpRequest) {
    // 目前主流的浏览器(Chrome, Mozilla, Safari, IE7+, ...)
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // <= IE 6 或早期IE版本
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} 
         //2.配置回调函数
httpRequest.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
 document.getElementById("divTable").innerHTML = this.responseText;
  }
};
//3.配置请求
httpRequest.open("POST", "ajax_post.jsp", true); //要请求的网页 
//4.配置http头
ttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//配置http头
//5.发送
httpRequest.send("fname=Seagull&lname=Anna"); //要一起发送的参数和值

四、JQuery中Ajax的使用

1.load()方法从服务器读取文件信息

$(选择器).load(URL,data,callback);

参数1 URL为请求的地址

参数2 data为键值对数据，和url请求一起发送到服务器

参数3 为回调函数。服务器响应后在本地执行的函数。

回调函数有三个参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

$("#b2").click(function(){
  $("#div1").load("1.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

$.Get()方法

语法：$.get(URL,callback);

例子：

$("#b3").click(function(){                                                $.get("kcQuery.jspname=zhangsan&password=12",function(data,status){
  alert("Data: " + data + "\nStatus: " + status);
 });
});

上面回调函数中有data和status两个参数.

data中是从服务器回传的数据。status是请求的状态。

3 $.Post()方法

语法：$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

例子：

$("#b4").click(function(){
$.post("testPost.jsp?name=zhangsan&password=12",  //参数一
{"name":"张三","city":"北京"}, //参数二
 function(data,status){  //参数三，回调函数
  alert("Data: " + data + "\nStatus: " + status);
});
});
test_post.jsp的内容
<%
String  fname,city
fname=Request.Form("name")
city=Request.Form("city")
**Response.Write("****亲爱的****"** **+****fname** **+** **"****同学****")**
Response.Write("生活在"+ city + "这所城市中。")
%>

$.ajax() 方法

$.ajax({
　　　　url : 'user/checkUname', 　    
　　　　type : 'post',　　　　　　　　 
　　　　data : {　　　　　　　　　　　    
　　　　　　　uUsername : u,　　　　  
　　　　　　　uPwd : $("#pwd").val()　  
　　　　　　},
　　dataType : 'json',    
　　　　success: function(data){　　      
　　　　　　console.log(data);    
　　　　　　alert(data);　　　　　  
　　　　　　}
});

五、JSON简介

json是一种轻量级的数据交换格式，易于人阅读编写，同时也易于机械解析和生成。 json采用完全独立于语言的文本格式，很多语言都提供对json 的支持，包括

c c++ C# java javascript perl python 等，这样使得就json称为理想的数据交换语

json是一种轻量级的数据交换格式

轻量级指的是跟xml作比较

数据交换指的是客户端和服务器之间业务数据的传递格式

JSON是一种简单的而数据格式，他有三种数据结构

键值对 —— Name/Value (Key/Value) : 左侧为属性，右侧为值

例子: {“name” : ”张三”}

对象 —— Object

一个JSON对象是包含了一组未排序键值对的集合。下面例子中的address就是一个JSON对象：

例子：

{

“peopleInfo” : {

“name” : “张三”,

“city” : “北京”,

“age” : “18”,

“country” : “中国”

}

数组 —— Arrays

JSON中[ ]来包含数组元素

例子：

{

“people” : [

{ “firstName”: “John”, “lastName”: “Smith”, “age”: 35 },

{ “firstName”: “Jane”, “lastName”: “Smith”, “age”: 32 }

]

}

再来看一下JSON 值的数据类型：

Number 数值类型数据可以是整型也可以是双精度的浮点型数据。

{ “age”:10 }

Boolean 值可以用true或false来表示

{ “isText” : true }

null 注意空值不是””
{ “name” : null }
String 被””引起来的字符串
{“name” : “张三”}
Object 见上面
Array 见上面

六、使用场景

1.JSON与Ajax

2.JSON与Java

类库选择

Java中并没有内置JSON的解析，因此使用JSON需要借助第三方类库。

下面是几个常用的 JSON 解析类库：

Gson: 谷歌开发的 JSON 库，功能十分全面。

FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。

Jackson: 社区十分活跃且更新速度很快。

3.JSON与JavaScript

字符串转对象 var jsonObject= JSON.parse(jsonstr);

对象转字符串 var jsonstr =JSON.stringify(jsonObject);

.jQuery基本的Ajax方法
底层$.ajax使用