Ajax的学习记录

Ajax学习笔记

1.同步与异步
同步:客户端发送请求到服务端,当服务器返回响应之前,客户端都处于等待卡死状态
异步:客户端发送请求到服务端,当服务器返回响应之前,客户端可以随意做其他事情,不会卡死

2.Ajax运行原理

页面发送请求,会将数据发送到ajax引擎,ajax引擎会提交请求到服务端。
在此过程中,客户端可以随意进行任何操作,直到服务端将数据繁育给Ajax引擎后,
会触发你设置的事件,从而执行自定义的js逻辑代码完成页面功能

3.JS原生ajax(了解)

(1)创建ajax引擎对象
(2)绑定监听
(3)绑定地址
(4)发送请求
(5)接收相应的数据

4.Json数据格式(重要)
json是一种数据交换的格式,使用ajax进行前后台数据交换

(1)Json的数据格式与解析
1)对象格式:{"key1":obj,"key2":obj}
2)数组格式:{[obj],[obj],[obj]}
例如:user对象用json数据格式表示
{"username":"zhangsan","age":20,"password":"123"}

List<User>用json数据格式表示
[{"username":"zhangsan","age":20,"password":"123"}][][]

注意:
1)对象格式和数组格式可以互相嵌套
2)json的key是字符串,json的value是object

5.json的解析
json是js的原生内容,即js可以直接取出json对象中的数据

6.Jquery的Ajax技术(重要)
Jquery对js的Ajax方法进行了封装

(1)get异步访问
$.get(
"", //url地址
{"name":"zhangsan","age":18},//json格式,请求参数
function(data){ //成功后的回调函数,data是响应参数
alert(data);
},
"text" , //data响应参数的类型
);
(2)post异步访问
$.post(
"", //url地址
{"name":"zhangsan","age":18},//json格式,请求参数
function(data){ //成功后的回调函数,data是响应参数
alert(data);
},
"text" , //data响应参数的类型
);

(3)ajax异步访问
$.ajax({option})

async boolean(默认true为异步,false为同步)
contentType String
data Object,String
dataType String(服务器返回的数据类型)
success function(请求成功后的回调函数)
error function(请求失败后的回调函数)
type String(请求方式)
url String(发送请求的地址)

(4)后台json数据转换
1)
JSONArray fromObject=JSONArray.fromObject(list);
fromObject.toStrin();

2)
Gson gson=new Gson();
String json=gson.toJson(list);

站内搜索
function searchWord(obj){
//1.获得输入框的内容
var word=$(this).val();
var content="";
//2.根据输入框的内容去数据库模糊查询
$.ajax({
url:"${pageContext.request.contextPath}/login",
dataType:{"word":word},
data:"json"
success:function(data){
//3.将返回的数据显示在输入框下的div内部
for(var i=0;i<data.length;i++){
content+="<div>"+data[i].name+"</div>";
}
$("#div").html(content);
}
});

}