AJAX
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX可以更新部分页面,而不需要整个刷新,从而提升用户体验。
XMLHttpRequest 对象
是Ajax的核心,所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建方法:
var xhr = new XMLHttpRequest();
常用方法:
open(GET/POST,URL地址,true/false) 打开连接
true和false代表异步或同步。
同步表示需要等待服务器响应后才能执行后面的代码
异步表示不需要等待服务器响应,响应后会进行通知
推荐使用异步方式。
send(String) 发送请求
如果是POST方法需要填写请求参数,如:name=zhangage=20
如果是Get方法参数可以不写
onreadystatechange事件回调,监听连接状态改变
用法:
onreadystatechange = function(){...};
常用属性:
readyState 连接状态
ajax共有5种状态:
状态 | 名称 | 描述 |
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
1 | Open | open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 |
2 | Sent | Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
4 | Loaded | HTTP 响应已经完全接收。 |
responseText 服务器响应文本内容
status 响应码、如:200、404、500等
案例:使用ajax和Servlet进行交互
html
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
titleInsert title here/title
script type=text/javascript src=js/jquery-3.3.1.js/script
script type=text/javascript
$(function(){
$(#div1).click(function(){
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开连接
xhr.open(GET,ajax.do?name=张三,true);
//发送请求
xhr.send(null);
//监听状态改变事件
xhr.onreadystatechange = function(){
console.log(状态:+xhr.readyState);
if(xhr.readyState == 4 xhr.status == 200){
//更新页面内容
$(#div1).text(xhr.responseText);
}
};
});
});
/script
/head
body
div id=div1点击我连接服务器/div
/body
/html
@WebServlet(/ajax.do)
public class AjaxServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType(text/html;charset=UTF-8);
//处理请求的中文乱码
String name = req.getParameter(name);
name = new String(name.getBytes(ISO-8859-1),UTF-8);
//给ajax客户端发送数据
resp.getWriter().println(你好!!+name+,我是服务器!!);
}
}
JQuery中的Ajax函数:
除了原生的Ajax代码外,JQuery框架也封装了几个ajax函数,让我们能更容易地与服务器交互。
$.ajax
常用参数:
type 请求方法GET、POST
url 服务器地址(必须)
data 请求参数
async 是否异步true,false
success 正常情况调用函数
error 错误情况调用函数
示例:
$.ajax({url:'check.do',data:{tel:‘13001112222’},async:true,
success:function(data){
alert('服务器返回内容'+data);
},
error:function(){
alert('服务器操作出现错误');
}
});
$.post函数
以post方式和服务器交互
$.post(URL地址,{参数名:值},function(data){
回调代码
});
案例:
//使用jquery的post方法
function post(){
$.post(ajax.do,{name:'李四'},function(data){
$(#div1).text(data);
});
}
$.get 函数
以get方式和服务器交互
$.get(URL地址?参数,function(data){
回调代码
});
案例:
//使用jquery的get方法
function get(){
$.get(ajax.do?name=赵六,function(data){
$(#div1).text(data);
});
}
load函数
使用load方法,将ajax加载的内容直接插入到标签中
案例:
$(function(){
$(#div1).click(function(){
//post();
//get();
$(#div1).load(ajax.do?name=马九);
});
});
应用场景:
用户注册时检查用户名是否存在
需求:用户注册时,填写手机号后,当输入框失去焦点时,对手机号进行服务器验证后在手机号输入框后面显示”用户名已存在或用户名可以使用;
思路:
1、在input的onblur事件中进行验证
2、通过ajax发送手机号给后台Servlet
3、Servlet对手机号进行数据库查询,返回是否存在的文字给ajax
4、ajax收到返回文字后,显示到标签上
总结:Ajax能够让浏览器和服务器进行交互,并且在不刷新页面的情况下对网页内容进行更新,大大提高了用户体验,通过Ajax技术能够构建交互性极强的Web应用程序。