简介
(1)AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
(2)AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
(3)AJAX 是一种用于创建快速动态网页的技术。
原理
动态页面&静态页面
静态页面:页面固定,页面内数据内容固定写入,每一个具体功能需要一个独立的page来支撑
动态页面:页面page根据数据动态生成,大部分页面由几个固定模板页面来动态生成
同步加载&异步加载
同步加载:页面在加载新的内容时候,整个页面无法进行其他操作,容易导致页面出现假死
异步加载:页面的多个功能操作可以同时执行,而不会互相影响而出现假死状态
AJAX
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
优点
(1)在页面不刷新的情况下异步加载数据
(2)实现页面数据动态更新
(3)实现页面数据局部刷新
实现机制
XMLHttpRequest
XMLHttpRequest对象是AJAX技术的核心对象
属性
属性 | 说明 |
---|---|
readyState | XMLHttpRequest对象的状态: 0:未初始化。对象已创建,未调用open; 1:open方法成功调用,但Sendf方法未调用; 2:send方法已经调用,尚未开始接受数据; 3:正在接受数据。Http响应头信息已经接受,但尚未接收完成; 4:完成,即响应数据接受完成。 |
responseText | 服务器响应的文本内容 |
responseXML | 服务器响应的XML内容对应的DOM对象 |
status | 服务器返回的http状态码(200、404、500) |
onreadystatechange | 请求状态改变的事件触发器 readyState变化时会调用这个属性上注册的javascript函数 |
方法
方法 | 说明 |
---|---|
open(method,url,asynch,username,password) | 指定和服务器端交互的HTTP方法,URL地址,即其他请求信息; Method:表示http请求方法,一般使用”GET”,”POST”. url:表示请求的服务器的地址; asynch:表示是否采用异步方法,true为异步,false为同步; 提供http认证机制需要的用户名和密码,后边两个可以不指定 |
send(content) | 向服务器发出请求,如果采用异步方式,该方法会立即返回 content可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。 |
setRequestHeader(header,Value) | 设置HTTP请求中的指定头部header的值为value. 此方法需在open方法以后调用,一般在post方式中使用。 |
实现思路
1、创建核心请求对象XMLHttpRequest
2、打开链接,配置请求信息:open(method,url,asynch)
3、请求发送:send(content)
4、定义回调函数,定义获取反馈消息后的执行操作:onreadystatechange
请求方式
GET
特点
(1)请求需要携带的参数通过open方法第二个参数后面带上
(2)携带参数格式:?param=value¶m=value¶m=value
demo
index.html
//1、兼容性判断
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
/*
2、打开连接,配置请求信息
参数1:GET/POST 参数2:后台响应servlet 参数3:true(同步)/ false(异步)
*/
xhr.open("GET","Servlet?name=cgt&psd=123",true);
//3、请求发送
xhr.send(null);
//4、定义回调函数
xhr.onreadystatechange = function () {
//判断XMLHttpRequest对象状态,若是4则响应数据接收完成
if(xhr.readyState==4){
//判断服务器返回的http状态码,若是200则连接成功
if(xhr.status==200){
//获取服务器响应数据
var result = xhr.responseText;
console.log(result);
}
}
}
Servlet
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
@Override
public void init() throws ServletException {
System.out.println("成功连接到Servlet");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doGet");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().write("已成功以GET方法连接");
String name = req.getParameter("name");
String psd = req.getParameter("psd");
System.out.println("name="+name);
System.out.println("psd="+psd);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPost");
resp.getWriter().write("已成功以POST方法连接");
}
}
结果
POST
特点
(1)参数不能在url后面携带
(2)参数必须通过send方法后面发送过去,格式:parm=value&parm=value
(3)send方法之前必须还得发送请求头:setRequestHeader
demo
index.html
//1、兼容性判断
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
/*
2、打开连接,配置请求信息
参数1:GET/POST 参数2:后台响应servlet 参数3:true(同步)/ false(异步)
*/
xhr.open("POST", "Servlet", true);
//3、请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4、请求发送
xhr.send("name=cgt&psd=123");
//5、定义回调函数
xhr.onreadystatechange = function () {
//判断XMLHttpRequest对象状态,若是4则响应数据接收完成
if (xhr.readyState == 4) {
//判断服务器返回的http状态码,若是200则连接成功
if (xhr.status == 200) {
//获取服务器响应数据
var result = xhr.responseText;
console.log(result);
}
}
}
Servlet
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
@Override
public void init() throws ServletException {
System.out.println("成功连接到Servlet");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doGet");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().write("已成功以GET方法连接");
String name = req.getParameter("name");
String psd = req.getParameter("psd");
System.out.println("name="+name);
System.out.println("psd="+psd);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doPost");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().write("已成功以POST方法连接");
String name = req.getParameter("name");
String psd = req.getParameter("psd");
System.out.println("name="+name);
System.out.println("psd="+psd);
}
}
结果
总结
1、前端和后台服务数据交互方式:get和post
(1)get方式提交,所有的参数都会在超链接后面通过?的方式提交过去,多个参数之间通过&符号进行间隔
(2)post方式:参数不能通过超链接携带,而是通过服务器传参
注意:超链接提交数据,统一都是用get方式提交
2、AJAX
post请求与get请求区别:
(1)参数不能在url后面携带
(2)参数必须通过send方法后面发送过去,格式:parm=value&parm=value
(3)send方法之前必须发送请求头:setRequestHeader