版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Coder_Boy_/article/details/83004698
#Ajax简介
Asynchronous JavaScript and XML
异步的JavaScript和XML技术
WEB程序
HTML界面--》侧重于信息浏览
动态网页技术--》侧重于交互性,动态生成HTML界面
CGI-->ASP-->PHP-->JSP-->.NET
Ajax应用：侧重于局部刷新/局部交互
XMLHttpRequest对象（内置在浏览器中，js对象）
##Ajax原理
Ajax是多种技术的综合运用。
-以XMLHttpRequest对象为核心,
实现请求的发送和响应结果的接收
-以JavaScript语言为基础,实现
用户操作和响应结果解析并呈现到页面
-以XML和JSON技术作为数据传输格式
-以HTML，CSS等技术做界面及渲染
##Ajax优点
-可以实现页面局部刷新,提升系统交互性能
-可以提升用户体验
A.
- ##什么时候用Ajax技术
一个页面包含很多功能处理,这些功能处理时不离开当前页面.
适合采用Ajax局部刷新,异步交互。
#Ajax基本使用
##发送Aajx请求
-创建XMLHttpRequest对象
new XMLHttpRequest();
-open方法：创建请求
open(get或post,url,同步异步);
true:表示异步;false:表示同步;省略时默认异步
-send方法：发送请求
send(参数);
参数:get请求写null;
post请求写参数值"key=value&key=value"
##服务器端处理
-编写Servlet或SpringMVC流程处理
-返回text字符串或JSON格式的数据
##Ajax回调处理
-onreadystatechange事件: 当readyState属性发生改变时触发
-readyState属性:属性值0-4,表示Ajax请求处理的过程。
4表示请求处理完毕。
-responseText属性:获取服务器返回的信息
-responseXML属性:获取服务器返回的XML信息
-status属性:获取服务器响应的HTTP CODE，例如200,404,500等
Ajax应用场景：视图页面不同部分信息更新情况
简单案例演示：
工程案例目录结构
导入Tomcat类库
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>ajaxcase-day01</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>helloServlet</servlet-name>
<servlet-class>com.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>helloServlet</servlet-name>
<url-pattern>/hello.do</url-pattern>
</servlet-mapping>
</web-app>HelloServlet.java
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("进入HelloServlet...");
//响应输出一个text字符串信息
PrintWriter out = response.getWriter();
out.print("Hello Ajax");
out.close();
}
}
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例1</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function createXhr(){
var xhr = null;//存储XMLHttpRequest对象
if(window.XMLHttpRequest){//非IE浏览器支持
xhr = new XMLHttpRequest();
}else{//IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function sendRequest1(){
//利用XMLHttpRequest对象发送请求
var xhr = createXhr();
//创建一个hello.do请求
//open(提交方式，请求URL,同步异步);
xhr.open("get","hello.do",true);
//注册回调处理函数
xhr.onreadystatechange = function(){
if(xhr.readyState ==4&&xhr.status == 200){
//获取服务器返回的结果
var data = xhr.responseText;
alert(data);
}
};
//发送Ajax请求，get请求参数为null；
//post请求参数是提交的数据
xhr.send(null);
}
</script>
</head>
<body >
<input type="button" id="btn1"
onclick="sendRequest1();" value="发送Ajax请求1">
<span id="s1"></span>
</body>
</html>启动Tomcat 运行 ajaxcase-day01工程， 录入请求http://localhost:8088/ajaxcase-day01/demo1.html
=======================
任务一：重新实现hello.do案例
发送Ajax请求后,将返回的信息,显示到一个span中
任务二：用户名是否可用检测
发送请求时机:用户焦点离开输入框触发Ajax请求发送
发送请求:open("get","check.do?name=输入框值",true)
send(null);
Servlet逻辑：获取请求参数name的值;
然后判断name是否等于scott;
如果等于scott返回"用户名被占用";
否则返回"用户名可用";
回调处理：将消息显示到span中提示
任务三：加载特定格式字符串的对应处理方式
上面案例演示的是 get方式请求，任务二 演示的是post请求方式
下面通过完成上面三个任务依次演示：
案例参考思路
##补充:如何发送post请求
xhr.open("post","check.do",true);
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.send("name="+name);
##补充:post请求提交的中文乱码
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
##案例：动态生成<select>元素的option列表
###发送Ajax请求
-页面一出来就自动发送Ajax请求（onload事件）
-请求地址:/loadcites.do
###服务器端处理
/loadcities.do-->LoadCityServlet-->返回一个字符串
"1:北京;2:上海;3:深圳"
ID NAME
1 北京
2 上海
3 深圳
###Ajax回调处理
-解析"1:北京;2:上海;3:深圳"消息
-将解析出的id和name构建一个
<option value="1">北京</option>
var opt = new Option(name,id);
-将option添加到<select>元素里web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<display-name>ajaxcase-day01</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>helloServlet</servlet-name>
<servlet-class>com.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>helloServlet</servlet-name>
<url-pattern>/hello.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>checkservlet</servlet-name>
<servlet-class>com.servlet.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkservlet</servlet-name>
<url-pattern>/check.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>loadcityservlet</servlet-name>
<servlet-class>com.servlet.LoadCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loadcityservlet</servlet-name>
<url-pattern>/loadcities.do</url-pattern>
</servlet-mapping>
</web-app>demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例1</title>
<script type="text/javascript">
//创建XMLHttpRequest对象
function createXhr(){
var xhr = null;//存储XMLHttpRequest对象
if(window.XMLHttpRequest){//非IE浏览器支持
xhr = new XMLHttpRequest();
}else{//IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function sendRequest1(){
//利用XMLHttpRequest对象发送请求
var xhr = createXhr();
//创建一个hello.do请求
//open(提交方式，请求URL,同步异步);
xhr.open("get","hello.do",true);
//注册回调处理函数
xhr.onreadystatechange = function(){
if(xhr.readyState ==4&&xhr.status == 200){
//获取服务器返回的结果
var data = xhr.responseText;
alert(data);
document.getElementById("s1").innerHTML = data;
}
};
//发送Ajax请求，get请求参数为null；
//post请求参数是提交的数据
xhr.send(null);
}
</script>
<script type="text/javascript">
function sendRequest2(){
//获取用户名
var name = document.getElementById("name").value;
//方式Ajax请求
var xhr = createXhr();
xhr.open("post","check.do",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//注册回调处理
xhr.onreadystatechange = function(){
if(xhr.readyState ==4&&xhr.status ==200){
//获取服务器返回的信息
var data = xhr.responseText;
document.getElementById("s2").innerHTML = data;
}
};
xhr.send("name="+name);
//提示正在检测
document.getElementById("s2").innerHTML = "正在检测中...";
}
</script>
<script type="text/javascript">
function sendRequest3(){
//发送Ajax请求
var xhr = createXhr();
xhr.open("get","loadcities.do",true);
//注册回调处理函数
xhr.onreadystatechange = function(){
if(xhr.readyState ==4&&xhr.status==200){
//获取服务器返回的信息"1:北京;2:上海;3:深圳"
var data = xhr.responseText;
//解析字符串，按;切割获取数组["1:北京","2:上海","3:深圳"]
var arr1 = data.split(";");
//循环城市信息
var city_select = document.getElementById("city");
for(var i=0;i<arr1.length;i++){
//切割"1:北京"字符串信息
var arr2 = arr1[i].split(":");
var id = arr2[0];//获取id值
var name = arr2[1];//获取name值
//创建一个<option>元素
var opt = new Option(name,id);
//添加到<select>元素中
city_select.options[i] = opt;
}
}
};
xhr.send(null);
}
</script>
</head>
<body onload="sendRequest3()">
<input type="button" id="btn1"
onclick="sendRequest1();" value="发送Ajax请求1">
<span id="s1"></span>
<hr>
用户名：<input type="text" id="name"
onblur="sendRequest2()">
<span id="s2"></span>
<hr>
<select id="city">
</select>
</body>
</html>package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//获取请求参数name值
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
System.out.println("用户输入："+name);
//模拟延迟
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//判断name值
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if("scott".equals(name)){
out.print("用户名被占用");
}else{
out.print("用户名可用");
}
out.close();
}
}
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.entity.City;
public class LoadCityServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
System.out.println("进入LoadCityServlet...");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print("1:北京;2:上海;3:深圳");//【1】
out.close();
}
}
重新启动Tomcat 运行 ajaxcase-day01工程， 录入请求http://localhost:8088/ajaxcase-day01/demo1.html
A.
B.
C.
