ajax

1.Ajax简介
全称：Asynchronous JavaScript and XML(JSON)
异步JavaScript和XML应用 Ajax属于客户端和服务器端交互的一项技术
1).原有交互模式：(整个页面刷新+请求和响应同步处理) 浏览器发请求–>Tomcat服务器–>Tomcat将响应信息给浏览器–>浏览器显示响应结果
2).Ajax交互模式：(局部刷新+异步处理) 浏览器发请求–>XMLHttpRequest发送–>Tomcat服务器–>Tomcat返回结果–>XMLHttpRequest接收结果–>将结果显示到浏览器页面
2.Ajax好处
–具有局部刷新和异步处理特性 --提升用户体验（避免了整个页面频繁刷新）
–采用异步模式交互,可以提升用户操作连续性,遇到复杂页面,可以实现页面局部刷新, 提升用户体验
–服务器返回纯数据(部分数据),不需要返回 整个响应页面,提升网络传输效率,加快响应速度(提高了程序交互效率(提升请求的处理效率))
3.Ajax程序可以分成以下3个过程
a.发送请求过程: 捕获用户事件,调用XMLHttpRequest发请求(发送时机：(事件)-请求地址：url-请求参数：具体分析)
b.服务器端处理过程: 采用Servlet或MVC流程处理请求,将数据返回给XMLHttpRequest
c.响应处理过程: XMLHttpRequest对象监听到服务器结果返回了， 自动调用一个处理函数. 处理函数：解析服务器返回数据,呈现页面(Ajax回调处理阶段解析返回的JSON/String数据,呈现到页面)

4.Ajax技术原理
利用浏览器集成的Ajax对象（XMLHttpRequest(js对象,内置浏览器中)）,发送请求接收响应。
IE是以ActiveXObject插件形式存在。
Ajax是多种技术一种综合运用。
a.以XMLHttpRequest为核心, 异步方式发送请求和接收响应结果(接收url请求–>处理(Serlvet)/框架–>返回响应数据(String/JSON))
b.以JavaScript语言为基础 获取请求要提交的数据,使用XMLHttpRequest, 响应结果呈现到页面都需要js实现
c.以XML/JSON格式作为数据传输
d.以HTML,CSS等技术作为渲染

3Ajax对象的使用
1)XMLHttpRequest对象的使用
-new XMLHttpRequest();//firefox,chrome
-new ActiveXObject(“Microsoft.XMLHttp”);//IE
xhr.open(请求类型,请求地址,同步异步) //创建Ajax请求
xhr.send(提交的数据); //get请求为null;post请求写key=value
回调函数注册
xhr.onreadystatechange 一定要在send函数调用前注册(事件)
2)XMLHttpRequest属性
xhr.readyState属性(表示Ajax请求和服务器交互状态)0,1,2,3,4(改变时触发注册事件)
0:请求创建完毕 1:请求发出 2:请求正在处理 4:请求响应完毕
xhr.status属性(HTTP响应CODE码)404,500,200
xhr.responseText属性//获取服务器响应文本信息
–responseXML:获取服务器返回的XML信息(了解)
JSON（JavaScript Object Notation）===
1采用直接量的方式创建对象就是(JSON)：格式：｛key：value｝其中key通常是字符串，value可以是任意类型数据。
2．获取JSON属性

1. var p = {“name”:“tom”,“age”:20}; p.name//获取tom p.age//获取age
   2)var ps=[{“name”:“Tom”,“age”:20},{“name”:“scott”,“age”:18},{“name”:“jack”,“age”:22}];
   ps[1].name//获取scott
2. var result={“status”:0,“msg”:“成功”,“data”:[{“name”:“rose”,“age”:20}]};
   result.status;//获取0 result.data[0].name;//获取rose
   3．将字符串转成JSON对象
   var str =xhr.responseText;//获取服务器返回的JSON字符串var str=’{“name”:“spring”,“age”:20}’;
   1. eval()函数把字符串转换为表达式得到一个结果，作用二将str字符串转换成JSON对象
      var p1=eval("("+str+")");
   2. JSON.parse()函数：var p1=JSON.parse(str);
      4．java将对象转成JSON字符串
      1)利用json-lib工具包(servlet) JSONObject/JSONArray
      //将list集合对象转成JSON字符串
      JSONArray json = JSONArray.fromObject(list);String str = json.toString();
      JSONObject json= JSONObject.fromObject(对象) String str = json.toString();
      2)-MVC框架封装(springmvc,struts2)
      
      =jQuery对Ajax的支持==========
      jQuery提供以下几个主要的函数，封装了发送Ajax请求接收响应处理。
      1.jQuery的ajax函数
      $.ajax();//创建发送一个ajax请求 $.get();//创建发送一个get类型的ajax请求
      $.post();//创建发送一个post类型的ajax请求 $.ajax()-->XMLHttpRequest2.$.ajax({ url:请求地址, type:请求类型post|get, data:提交的数据, async:同步或异步处理true|false,默认异步, dataType:“服务器响应回来的数据格式”, success:成功回调函数, error:失败回调函数, beforeSend:请求发送前回调函数});
      3.$.get(地址,提交数据,成功回调函数,返回数据类型)
      $.getJSON(地址,提交数据,成功回调函数)和get区别就是getjson获得的结果是josn所以不用设返回值类型4.-$.post(地址,提交数据,成功回调函数,返回数据类型)
      eg：data就是服务器返回的JSON结果，由于dataType为json，所以data已经是JSON类型
      $.ajax({ url:“hello.do”, type:“get”, dataType:“html”, success:function(data){ //回调处理逻辑 }});

$.get(“hello.do”,function(){data},“html”);
$.post(“check.do”, {“username”:username}, function(data){}, “text” );
//页面载入后，发送ajax请求加载城市
$(function(){//等价余onload
$.ajax({
url:“cities.do”,
type:“post”,
dataType:“json”,
success:function(data){
//data就是服务器返回的JSON结果，由于dataType为json，所以data已经是JSON类型
for(var i=0;i<data.length;i++){
var id=data[i].id;//获取城市id
var name=data[i].name;//获取城市名字
//拼一个option字符串
var str=""+name+"";
//添加到id=s1的select
$("#s1").append(str);
}
},
error:function(){
alert(“加载数据失败”);
}
});
});
2) //页面载入后，发送ajax请求加载城市
$(function(){//等价余onload
//发送ajax请求
$.get(“cities.do”,
function(data){
for(var i=0;i<data.length;i++){
var id=data[i].id;//获取城市id
var name=data[i].name;//获取城市名字
//拼一个option字符串
var str=""+name+"";
//添加到id=s1的select
$("#s1").append(str);
}
},“json”);
});
3）//页面载入后，发送ajax请求加载城市
$(function(){//等价余onload
//发送ajax请求
$.post(“cities.do”,
function(data){
for(var i=0;i<data.length;i++){
var id=data[i].id;//获取城市id
var name=data[i].name;//获取城市名字
//拼一个option字符串
var str=""+name+"";
//添加到id=s1的select
$("#s1").append(str);
}
},“json”);
});
4) //页面载入后，发送ajax请求加载城市
$(function(){//等价余onload
$. getJSON(“cities.do”,//发送ajax请求
function(data){
for(var i=0;i<data.length;i++){
var id=data[i].id;//获取城市id
var name=data[i].name;//获取城市名字
//拼一个option字符串var str=""+name+""; $("#s1").append(str);
}
});
});
5. Ajax可以在页面不刷新的情况下,发出HTTP请求,服务器返回数据,之后解析数据,刷新页面
局部区域。 XMLHttpRequest为核心发送请求,接收数据
jQuery: $.ajax(),$.get(),$.post(),对象.load()
6．5. -对象.load()
DIV对象.load(地址,提交数据,回调函数)采用ajax请求加载一个内容,内容返回后自动将内容添加到DIV对象里。默认回调处理：DIV对象.html(内容);发送ajax请求–》服务器返回内容–》默认回调处理–》回调函数.(常用来引入其他页面作为当前页面内容url是其他的html文件)
$(function(){//载入页面后
$("#d1").load(“city/load.do”);//请求数据不经过处理直接显示
$("#d1").load(“demo1.html”);//引入其他页面作为当前页面内容
$("#d2 ").load(“demo3.html”);
});