Ajax技术
1、同步与异步
同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待、卡死的状态。
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会卡死。
2、Ajax运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以进行任意操作,知道服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面的功能。
js原生的Ajax技术
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原生的Ajax完成异步操作,有以下几个步骤:
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)接收响应数据
如果是Post方式提交,需要在发送请求之前设置一个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
注:所有的异步访问都是Ajax引擎
Json数据格式
json是一种与语言无关的数据交换格式。作用就是:使用Ajax进行前后台的数据交换、移动端与服务端的数据交换
Json的格式与解析
1)对象格式:{“key1”:obj,"key2":obj,"key3":obj....}
2)数组/集合格式:[obj,obj,obj...]
例如:user对象,用Json数据格式表示为:{“username”:“zhangsan”,"age":18,"address":"淄博"}
List<Product>,用Json数据格式表示为:[{"pid":10,"pname":"小米4C"},{},{}...]
注:1、对象格式和数组格式可以互相嵌套的
2、json的key是字符串,json的value是object
json的解析:json是js的原生内容,也就意味着js可以直接取出json对象中的数据
class Person{ String firstname = "张"; String lastname = "三丰"; Integer age = 100; } 案例一 {key:value,key:value} {"firstname":"张","lastname":"三丰","age":100} 案例二 [{key:value,key:value},{key:value,key:value}] [{"firstname":"李","lastname":"四","age":18},{},{}] 案例三 { "param":[{key:value,key:value},{key:value,key:value}] } "java0131":[{"firstname":"李","lastname":"四","age":18},{},{}] 案例四 { "param1":[{key:value,key:value},{key:value,key:value}], "param2":[{key:value,key:value},{key:value,key:value}], "param3":[{key:value,key:value},{key:value,key:value}] } 案例五 { "param1":"value1", "param2":{}, "param3":[{key:value,key:value},{key:value,key:value}] }
Jquery的Ajax技术
Jquery是一个优秀的js框架,自然对js原生的Ajax进行了封装,封装后的Ajax在操作方法上更简洁,功能更强大,与Ajax操作相关的jQuery方法有如下几种,但是开发中经常使用的有三种
1、$.get(url,[data],[callback],[type])
2、$.post(url,[data],[callback],[type])
url:代表的请求的服务器端的地址
data:代表的请求服务器端的数据(可以是key=value形式,也可以是json格式)
callback:代表的服务器端成功响应所触发的函数(只有正常成功返回才执行)
type:表示服务器端返回的数据类型(jQuery会根据指定的类型自动转换),常用的返回类型:text、json、html等
3、$.ajax({option1:value1,option2:value2......});
常用的option如下:
async:是否异步,默认是true代表异步
data:发送到服务器的参数,建议使用json格式
dataType:服务器端返回的数据类型,常用的text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端的地址
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function fn() { $.get( //url地址 "/web13/JqueryAjax", //data数据 { "name" : "小红", "age" : 18 }, //回调函数 function(data) { alert(data.name) }, //数据格式 "json" ); } function fn1() { $.get( //url地址 "/web13/JqueryAjax", //data数据 { "name" : "小红", "age" : 18 }, //回调函数 function(data) { alert(data.name) }, //数据格式 "json" ); } function fn2() { $.ajax({ url : "/web13/JqueryAjax", async : true, type : "post", data : { "name" : "小红", "age" : 18 }, success : function(data) { alert(data.name); }, error : function() { alert("请求无效"); }, dataType : "json" }); } </script> </head> <body> <input type="button" value="GET方式异步请求服务器" onclick="fn()"> <input type="button" value="POST方式同步请求服务器" onclick="fn1()"> <input type="button" value="ajax请求服务器" onclick="fn2()"> </body> </html>