AJAX概述
Ajax (Asynchronous JavaScript and XML)异步的JavaScript和XML。它并不是一种全新的技术,而是由JavaScript 、XML、CSS等几种现有技术整合而成。
异步:程序执行,两端代码互不干扰,页面只更新一部分内容。
同步:程序执行,必须上面的代码执行完毕后,后面的代码才可以执行,页面不管更新多少内容,整个页面都需要更新。
Ajax与传统web开发技术的区别
-
发送请求的方式不同:传统方式通过浏览器发送;Ajax技术通过JavaScript的XMLHttpRequest对象发送的。
-
服务器响应不同:传统方式服务器响应给浏览器的是一个完整的页面,通过Ajax技术,服务器响应只需要响应数据(JSON)。
-
客户端处理响应方式不同:传统方式是浏览器直接把服务器的响应加载成一个新的页面。Ajax只是通过JavaScript动态更新页面中需要更新的部分。
执行流程:
-
用户触发事件,调用JavaScript。
-
通过Ajax的引擎:
XMLHttpRequest
对象发送异步的请求到服务器。 -
服务器处理完请求后,响应给XMLHttpRequest对象对应格式(文本、XML、JSON、页面等)的数据利用返回的数据,通过JavaScript技术动态更新需要更新的区域。
XMLHttpRequest
XMLHttpRequest:由这个对象发送异步请求到服务器。
怎么获取这个对象?考虑两种情况:
1、主流浏览器 var xhr = new XMLHttpRequest();
2、IE5、IE6 var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
方法 | 说明 |
---|---|
open( String method, String url,boolean async) | 创建一个新的HTTP请求。method:异步请求的提交方式:get、post。url:异步请求的路径。async:发送的请求是同步还是异步 ,默认为异步 true |
send( String data ) | 发送请求到服务器端。data:提交到服务器的数据,如果是get请求,这儿写null;参数在发送的URL后面拼接如果是post请求,参数这儿正常写就可以 name=张三&age=18 |
abort( ) | 取消当前请求 |
setRequestHeader(String header, String value ) | 设置请求的某个HTTP头信息。发送post请求必须得设置这个头信息。Header:Content-Type,Value: application/x-www-form-urlencoded |
getResponseHeader(String header) | 获取响应的指定HTTP头信息 |
getAllResponseHeader( ) | 获取响应的所有HTTP头信息 |
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0:请求未初始化,1:服务器连接已建立,2:请求已接收,3:请求处理中,4:请求已完成,且响应已就绪 |
status | 200: “OK”,404: 未找到页面 |
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
原生AJAX请求的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//在这里使用js发起ajax请求,访问服务器AjaxServlet中的javaScriptAjax
function ajaxRequest(){
//1.创建XMLHttpRequest对象
var xhr;
//判断浏览器
if (window.XMLHttpRequest){ //主流浏览器
xhr = new XMLHttpRequest();
} else { //IE5、IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、创建XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
//3、调用open方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/ajax/ajaxServlet?action=javaScriptAjax",true)
//5、在send方法前绑定onreadystatechange事件,处理请求完成后的操作
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
}
}
//4、调用send方法发送请求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>
Servlet中代码
Person person = new Person(1,"张三");
//json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
resq.getWriter.write(personJsonString);
封装原生JS的Ajax
在ajaxJs.js
中进行封装:
/**
* 封装原生ajax
* @param options 这是一个对象 用于放置发送ajax必须的参数
* 比如:发送的请求的方式 :type :get.post
* 请求的参数 ;data "name"=张三&"age"=23 {name:zhangsan,age:23}
* 请求到后台的路径;url
* 请求成功后的处理函数
*/
function ajax(options) {
//判断传入的对象如果为空,给一个默认值
options = options || {};
//设置请求发送 默认为get请求 toUpperCase:把传过来的单词转换成大写
options.type = (options.type || "GET").toUpperCase();
//对请求参数做处理 把{name:zhangsan,age:23}中发送的参数,转换成"name"=张三&"age"=23方式。
var params = formateParams(options.data);
//创建XMLHttpRequest对象
var xhr;
//判断浏览器
if (window.XMLHttpRequest){ //主流浏览器
xhr = new XMLHttpRequest();
} else { //IE5\IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断用户是get提交还是post提交
if(options.type == "GET"){
//创建异步请求
xhr.open("GET",options.url+"?"+params,true);
//发送异步请求
xhr.send(null);
}else if(options.type == "POST"){
//创建异步请求
xhr.open("POST",options.url,true);
//设置post提交的请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送异步请求
xhr.send(params);
}
//回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
var status = xhr.status;
if (status == 200) { //响应成功
options.success(xhr.responseText);
}else{ //响应失败
options.error(status);
}
}
}
}
/*对用户传入的参数进行格式化处理*/
function formateParams(data) {
//判断用户传入的是字符串还是对象
var result = typeof data;
if (result == "string") {
return data;
}else if (result == "object"){
//需要把对象拼接成上面的字符 k=v&k=v
var arr = [];
for(var name in data){
//在拼接的时候建议对中文进行转码,就像cookie往浏览器中存中文一样
arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name])); //往数组中添加元素
}
//把数组转换成字符串 [name=zhangsan,age=23] k=v&k=v
return arr.join("&");
}
}
测试封装:
<html>
<head>
<title>封装ajax测试</title>
</head>
<body>
<script src="js/ajaxJs.js"></script>
<script>
//创建一个对象,来定义一下发送异步请求必须的参数
/*var obj = {
data: "name=张三&age=25",
url: "/ajax/test01",
success: function (data) {
console.log(data);
}
}*/
//调用ajax
// ajax(obj);
ajax({
type: "post",
data:{name:"李四",age:26},
url: "/ajax/test01",
success: function (data) {
console.log(data); // json
// JSON.parse(data) // 还需要把json转换成js对象
}
});
</script>
</body>
</html>
JQuery中的Ajax请求
$.ajax 方法
-
url 表示请求的地址。
-
type 表示请求的类型 GET 或 POST 请求。
-
data 表示发送给服务器的数据 格式有两种:
name=value&name=value
、{key:value}
-
success 请求成功,响应的回调函数。
-
dataType 响应的数据类型 常用的数据类型有:text表示纯文本、xml 表示 xml 数据 、json 表示 json 对象。
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/ajax/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是:" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号:" + data.id + " , 姓名:" + data.name);
},
dataType : "json"
});
});
$.get
方法和$.post
方法
-
url:请求的 url 地址。
-
data:发送的数据。
-
callback:成功的回调函数。
-
type:返回的数据类型。
// ajax--get 请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/ajax/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name); },"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
},"json");
});
$.getJSON 方法
-
url:请求的 url 地址。
-
data:发送给服务器的数据。
-
callback:成功的回调函数。
// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQueryGetJSON",function (data) {
$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
});
});
表单序列化serialize()
serialize()
可以把表单中所有表单项的内容都获取到,并以 name=value&name=value
的形式进行拼接。
// ajax 请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
});
});
评论区