深入理解Ajax与JSON-优快云博客

什么是Ajax?
.Asynchronous JavaScript and XML(异步同时进行) 异步的JavaScript和xml
.Ajax是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发请求.
.服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容.

如何获取Ajax对象
function getXhr(){
   //var a ="a"; //string String对象
   var xhr =null;
   if(window.XMLHttpRequest){
       xhr=new XMLHttpRequest();
   }else{
       xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}
</script>

Ajax对象的属性和方法
abort() 取消请求
open(method,url) 创建请求,method请求类型post和get
send(); 发送
onreadystatechange(客户端):
readyState: 请求状态:0 尚未初始化
1:正在发送请求
2.请求完成
3.请求成功,正在接受数据
4.数据接受成功

status 服务器返回的http请求响应值:
常用的有:
200:表示请求成功
202:请求被接受但未被处理
304:没有发生改变
400:错误的请求
404:资源未找到
500:内部服务器错误,比如jsp代码错误等.

responseText 服务器返回的文本
responseXML 服务器返回的xml ,可以当做DOM处理.

发送异步请求的步骤:
1.获取Ajax对象:获取XMLHttpRequest对象实例
2.设置回调函数:为Ajax对象onreadystatechange事件设置响应函数
3.创建请求:调用XMLHttpRequest对象的open方法
4.发送请求:调用Ajax对象的send方法.

使用Ajax发送get请求:
需求:使用Ajax发送get请求:从服务器获取一小段文本.

练习:
完成对用户名的验证.

--------------------------------------------------------

----------------------------------------

onreadystatechange:绑定一个事件处理函数,
该函数用来处理onreadystatechange事件.
ps:当Ajax的readyState的值发生改变,比如:从0变成了1,就会产生onreadystatechange事件

readyState:一共有5个值,分别为Ajax对象和服务器通信状态
xhr.open("get","action.do",true);
true:表示发送异步请求(当Ajax对发送请求时,用户任然可以对页面做其他操作.)
false:表示发送同步请求(当Ajax对发送请求时,用户不可以对页面做其他操作.)

发送请求:
GET 请求 xhr.send(null)
POST请求: xhr.send(name=value&name=value....)
ps:
GET请求
-send方法内传递null
诺要提交数据,则在open方法的url属性后面追加
xhr.open("GET",action.do?name=value&name=value....,true);

使用Ajax对象POST请求
使用Ajax对象POST请求类型的请求,并向服务器提交一段文本,显示从服务器端返回的文本.

//3.创建请求
   xhr.open("post","action.do",true);
   //设置消息头
注意: xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   //4.发送请求
   xhr.send("uname=Dr");

setRequestHeader的作用:因为HTTP协议要求发送post请求是必须要有一个Content-type消息头,但是默认情况下Ajax对象是不会添加
该消息头,所以调用setRequestHeader方法进行设置
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

目前为止我们都是一个小文本.

小结:Ajax的应用.
1.输入的值需要检验,如检查注册的用户名是否被占用
2.搜索时出现的自动提示列表
3.级联显示
4.数据录入和列表显示同一个页面
5.不需要刷新的翻页.

使用Ajax校验用户名:
要求:
1.不用练数据库
2.点击验证出现"正在验证..."1秒钟显示验证结果.//模拟一下网络延时
3.级联显示
需求:两个下拉框,第一个选省份,一旦用户选好城市后在第二个动态的加载该省份所对应的城市,使用Ajax实现.

POST请求时的乱码处理:
在post提交中,如果填写的用户名为中文信息时,就会出现乱码,但在火狐浏览器中提交中文可以被服务器端正确识别,原因是火狐会告诉
服务器以什么方式解码
而IE和Chrome浏览器提交的数据,到了服务器端都是以默认方式ISO-8859-1来解析的.

ps:提交时浏览器依据meta标记指定的UTF-8的方式进行编码

解决方案:
设置服务器的解码方式utf-8即可.
request.setCharacterEncoding("utf-8");

GET方式乱码的解决
以GET方式提交的数据存在于提交的消息头中URL中,HTTP协议对于URI的编码的方式为UTF-8,但是uri后面的查询字符串的
编码方式却是iso-8859-1 到了服务器,容器针对uri的解码方式时iso-8859-1,依旧解析不了中文,所以会出现乱码,
为了能支持地址中查询字符串的中文格式,需要在浏览器和服务器同时进行支持UTF-8格式编码,解码格式.

iso-8859-1:本质是单字节编码,自身不能显示中文.

解决方案:
1.修改tomcat的默认解码格式
修改tomcat安装路径下conf/server.xml文件,找到Connector节点,增加URIEncoding="UTF-8"这个属性即可.

2.使用JavaScript语言中的encodeURI()方法,对open方法中url进行编码.

JSON
.JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.
.易于人阅读和编写,同时也易于解析和生成.
.JSON完全独立于语言之外,但语法上借鉴了JavaScript.
轻量级:相对于XML,JSON解析速度更快,文档更小.

JSON的结构
.JSON主要分两种结构:
-"名称/值"对的集合,不同的语言理解为对象,记录,结构,字典,哈希表等.
-值的有序列表,大部分语言中理解为数组.

(JavaScript)使用JSON表示一个对象
.{属性名:属性值,属性名:属性值....}
.注意:属性值可以是string number,boolean,null,object.(function)
-属性名必须要使用双引号引起来
-属性值如果是字符串,必须使用双引号括起来.
JSON
{"name":"tom","city":"北京","age","15"}

XML
<emp>
<name>tom</name>
<city>北京</city>
<age>15</age>
</emp>

(javaScript)表示一个数组
语法定义:[value,value,value.....]
.value可以是简单数据类型,也可以是object数组类型
例如:
数组:
[
{"name":"tom","city1":"北京","age1","15"}
{"city":"北京","age","15"}
]
--------------------------
对象:
{"name":"salay","hobby":"["sing","dance","eat"]"}

实际开发状态
-数据交换原理

客户端服务端

JavaScript对象 <--------JSON形式字符串对象

JSON字符串 ------------>JavaScript对象
.使用JavaScript语言的原生函数:eval();
.但是该方法有风险,使用需谨慎(要预防服务器传送恶意方法)
var txt = "{'city':'北京','age':'15'}";
var obj2 = eavl("("+txt+")");

方法二:
var ob = JSON.parse(txt);//转换成JSON对象
alert(ob.city2);

方法三:
使用JSON.JS文件末字符串增加方法
var txt = '{"city2":"北京","age":"15"}';
var obj = txt.parseJSON();
alert(obj.city2);

----------------------------------------

-----------------------------------------------

服务端
java对象转换成JSON
转换成的准备:
.引入必要的jar文件
commous-beanutils
commous-collections
commous-lang
commous-logging
ezmorph-1
json-lib

利用JSON官方提供的API:JSONObject,JSONArray提供的方法
练习:
java对象装换成json字符串
java数组/集合转换为json字符串

json字符串转化为java对象
json字符串转换为java数组/集合

---------------------------------------------------------

public void test01(){
       //java对象转换为json字符串
       Friend f =new Friend();
       f.setName("zhangsan");
       f.setAge("22");
       //使用api自动转换
       JSONObject json01=JSONObject.fromObject(f);
       String jsonstr=json01.toString();
       System.out.println(jsonstr);
   }

   @Test
   public void test02(){
       //java数组集合转换json字符串
       List<Friend> fs=new ArrayList<Friend>();
       for(int i=0;i<3;i++) {
           Friend f =new Friend();
           f.setName("zhangsan");
           f.setAge("22");
           f.setAge("32");
           fs.add(f);
       }
       JSONArray jsonarr=JSONArray.fromObject(fs);
       String jsonstrarr=jsonarr.toString();
       System.out.println(jsonstrarr);
   }


   public void test03(){
       // json字符串转换为java对象
       String jsonstr="{\"name\":\"Luffy\",\"age\":20}";
       JSONObject jsonobj=JSONObject.fromObject(jsonstr);
       Friend f=(Friend)JSONObject.toBean(jsonobj,Friend.class);
       System.out.println(f);
   }


   public void test04(){
       // json字符串转换 java数组集合
       String jsonstr="[{\"name\":\"Luffy\",\"age\":20},{\"name\":\"fy\",\"age\":2}]";
       JSONArray jsonobj=JSONArray.fromObject(jsonstr);
       List<Friend> f01=(List<Friend>)JSONArray.toCollection(jsonobj,Friend.class);
               System.out.println(f01);
   }

---------------------------------------------------------------------------------------------

练习:
1.使用json完成级联下拉列表

2.热卖商品动态显示:
每隔5秒,显示当前买的最好的三件商品.(连接数据库)
方案:
每5秒发送一次Ajax请求,将返回JSON集合数据显示在页面的div中.

3.三级联动下拉菜单

jQuery对Ajax的支持(所谓支持就是原生Ajax的方法的封装)
.方案:
使用$.load(),$.get(),$post(),$.ajax()方法发送异步请求

load()
.作用:将服务器返回的数据字节添加到符合要求的节点之上.
.用法:
.$obj.load(请求地址,请求参数);
.请求参数
-"username=tom & age=22"
-{'username':'Tom','age':22}

.在有请求参数的时候,load方法发送post请求,否则发送get请求.

练习:使用load()方法,

------------------------------------------------------

$(function(){
   $(".s1").click(function(){
   var empId = $(this).parent().siblings().eq(0).text();
   //alert($(this).parent().siblings().eq(0).text());
   //发送ajax请求哪里调用哪里显示
   $(this).next().load('salary.do','empId='+empId);
   });
});

-----------------------------------

$.get()方法
.作用:发送get类型的请求
.用法:$.get(请求地址,请求参数,回调函数function(data){...},服务器返回的数据类型)
说明:
-回调函数添加的参数是服务器返回的数据.
-服务器返回的数据类型:
html:HTML文本 "<p>这是一段文本</p>"
text:文本 "这是一个文本"
JSON:js对象
xml:XML文档
scipt:JavaScript脚本

练习使用$.get()方法
股票行情实时刷新demo

post请求方式
$(function(){
   window.setInterval(quoto,3000);
});
function quoto(){
$.post('quoto.do',function(data){
   //data:服务器返回的数据,如果返回的是json字符串,会自动转换成JavaScript的对象
   //每次拼接显示之前清空
   $("#tb1").empty();
   for(var i=0;i<date.length;i++){
       var s = date[i];
       $("#tb1").append('<tr><td>'+s.code+'</td><td>'+s.name+'</td><td>'+s.price+'</td></tr>');
   }
},'json');

}

get方式和post方式基本一致,但有区别:
主要区别:
修改post请求为get请求时,相关参数不变,只有在IE浏览器下回存在缓存的问题
所以在请求地址追加一个随机数就可以欺骗IE浏览器,让其认为请求的数据有变化
一般情况下加个时间戳
$.get('quoto.do?date='+ new Date().getTime(),function(date){}

ajax()
.用法:$.ajax({})
.{}内可以设置的选项参数有:
-url:请求地址
-type:请求方式
-data:请求参数
-dataType:服务器返回的数据类型
-success:服务器处理正常对应的回调函数
-error:服务器出错时对应的回调函数

------------------------------------

$(function(){
   window.setInterval(quoto,3000);
});
function quoto(){
   $.ajax({
       url:"quoto.do",
       type:"post",
       dataType:"json",
       success:function(date){
           $("#tb1").empty();
           for(var i=0;i<date.length;i++){
               var s = date[i];
               $("#tb1").append('<tr><td>'+s.code+'</td><td>'+s.name+'</td><td>'+s.price+'</td></tr>');
           }
       },
       error:function(){
           //服务器出错的逻辑

       }
   });
       }