本帖最后由 忽忽糊糊虎虎 于 2017-12-27 17:25 编辑
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX 工作原理
AJAX实现
（1）创建 XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
（2）AJAX - 向服务器发送请求请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。
• string：仅用于 POST 请求
（3）AJAX - 服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
________________________________________
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应；
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性；
（4）AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面
注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
（5）ajax案例
编写servlet，doGet()方法获得数据，并发送响应数据
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1 获得数据
String username = request.getParameter("username");
String password = request.getParameter("password");
//2 处理
System.out.println(username + " : " + password);
//3 响应数据
response.getWriter().print("get success");
}
在demo01.jsp提供按钮，点击发送get请求。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js实现ajax(了解)</title>
<script type="text/javascript">
//同步提交请求
function commit(){
location.href="${pageContext.request.contextPath}/hello?name=admin&pwd=123456";
}
//异步提交请求
function sendGet(){
//1.获取ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2.设置回调函数,作用ajax请求服务器过程中不同状态变化的时候都会调用这个函数
xmlHttp.onreadystatechange = function(){
//获取服务器响应数据并处理显示
//xmlHttp.readyState,ajax引擎对象请求服务器过程中不同的状态值
//xmlHttp.readyState，0~4
/* • 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪 */
//获取服务器响应的数据进行处理并显示
if(xmlHttp.readyState==4){
//200,http状态码，浏览器与服务器通信正常
if(xmlHttp.status==200){
//通信正常，并且接收到服务器的正常响应数据
//获取服务器响应数据
var content = xmlHttp.responseText;//服务器响应的文本字符串
alert(content);
}
}
};
//3.设置请求方法与提交服务器地址
//xmlHttp.open(method, url);
//method,设置请求方法（get或post）
//url，设置服务器地址
xmlHttp.open("get", "${pageContext.request.contextPath}/hello?name=admin&pwd=123456");
//4.ajax引擎对象发送异步请求
xmlHttp.send();
}
</script>
</head>
<body>
<input type="button" value="同步提交get请求"><br/><br/>
<input type="button" value="js异步提交get请求"><br/><br/>
</body>
</html>
（本案例只提供了get提交，post提交同理可得）；
|
|
收藏
淘帖
踩
