Ajax异步请求

1.基础

• 同步：客户端发送请求给服务器，在服务器响应前，客户端都处于卡死状态。即单线程。
• 异步：客户端发送请求给服务器，无论服务器是否响应，客户端都可以进行其他操作。即多线程。

2.原生js的ajax

 

3.json

• 是一种与语言无关的数据交换格式，为键值对形式，java可以用，android可以用，php可以用
• 两种格式：

1. 对象格式：{"username":"123","password":"456","account":{"money":"500","time":"2019-05-20"}}
2. 数组/集合格式：[{"username":"123","password":"456"},{"username":"789","password":"000"}]

• 对象{}和数组[]可以相互嵌套。
• json的key是string，value是object。
• json是js的原生内容，使用方便,js可以直接取出json对象中的数据。

4.js中使用json

var json={"baobao":
            [
                {"name":"liu","addr":"beijing"},
                {"name":"li","addr":"liaoning"}
            ],
            "heihei":
            [
                {"name":"zhang","addr":"guangxi"},
                {"name":"pang","addr":"anhui"}
            ]
        };
alert(json.baobao[0].addr);
alert(json.heihei[1].name);

5.json的转换插件

• 将java的对象或集合转成json形式字符串
• json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种：

1. jsonlib
2. Gson：google
3. fastjson：阿里巴巴

6.jquery的ajax

• 使用前在html中引入jquery
• 基础知识：

//格式$.get(url,[data],[callback],[type])中括号表示可省略
//   $.post(url,[data],[callback],[type])中括号表示可省略
//待发送数据，可以是键值对，也可以是json格式
//请求成功时执行回调函数内容
//返回内容格式,jquery会根据设置自动转换

//$.ajax( { option1:value1,option2:value2... } ); ----get和post方法的底层都是这个
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

• 使用方式：

• 	function fn1(){
  		//get异步访问
  		$.get(
  			"/WEB22/ajaxServlet2", //url地址
  			{"name":"张三","age":25}, //请求参数
  			function(data){ //执行成功后的回调函数
  				//{\"name\":\"tom\",\"age\":21}
  				alert(data.name);
  			},
  			"json"
  		);
  	}
  	function fn2(){
  		//post异步访问
  		$.post(
  			"/WEB22/ajaxServlet2", //url地址
  			{"name":"李四","age":25}, //请求参数
  			function(data){ //执行成功后的回调函数
  				alert(data.name);
  			},
  			"json"
  		);
  	}
  	function fn3(){
  		$.ajax({
  			url:"/WEB22/ajaxServlet2",
  			async:true,
  			type:"POST",
  			data:{"name":"lucy","age":18},
  			success:function(data){
  				alert(data.name);
  			},
  			error:function(){
  				alert("请求失败");
  			},
  			dataType:"json"
  		});
  	}