=======Ajax基本使用==========
#什么是Ajax,优点,什么时候用
全称：Asynchronous JavaScript and XML
异步的JavaScript和XML应用
Ajax请求，服务器返回的是纯数据,不是HTML页面
浏览器发请求1--->Tomcat服务器处理-->返回给浏览器浏览器发请求2--->Tomcat服务器处理-->返回给浏览器
异步特点：请求2可以在请求1没处理返回情况下发出
优点：异步处理;
提升用户体验(在页面不刷新情况下,处理请求,改变页面部分显示)
提升请求的处理效率
选用标准：避免整个页面频繁刷新;实现局部处理刷新
#Ajax使用
XMLHttpRequest作用：发送请求,接收响应结果（内置在浏览器）
##XMLHttpRequest对象使用
-new XMLHttpRequest();//firefox,chrome
-new ActiveXObject("Microsoft.XMLHttp");//IE
-open(请求类型,url,同步异步);//创建请求
-send(post数据);//发送请求
-readyState;//Ajax请求处理状态0-4
0:请求未初始化,1:请求未发送;2:请求发送完毕 3:请求正在处理;4:请求处理完毕
-onreadystatechange:事件
-status;//服务器响应HTTP CODE 200正确
#示例代码
demo1.html
<html>
<head>
<title>demo1.html</title>
<Meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//获取XMLHttpRequest对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//发送请求
function sendRequest1(){
var xhr = getXhr();//获取XMLHttpRequest对象
//alert(xhr);
xhr.open("get","hello.do",true);//创建请求
//注册回调函数
xhr.onreadystatechange = function(){
//解析结果，刷新页面处理
//alert(xhr.readyState)
if(xhr.readyState==4 && xhr.status==200){
var msg = xhr.responseText;//获取返回的信息
alert(msg);
}
}
//参数对post有效,get写null
xhr.send(null);//发送请求
}
</script>
<script type="text/javascript">
//失去焦点时，用户名检测
function sendRequest2(){
//获取请求参数
var name = document.getElementById("name").value;
//alert(name);
var s1 = document.getElementById("name_span");
if(name==""){
s1.innerHTML = "用户名为空";
return ;
}
//发送ajax请求
var xhr = getXhr();
//alert(xhr);
//var url = "check.do?name="+name;
//xhr.open("get",true);
xhr.open("post","check.do",true);
//post请求时，须添加此消息头，否则参数为null
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("name="+name+"&age=1");
//友好提示
s1.innerHTML = "正在检测...";
xhr.onreadystatechange = function(){
//alert(xhr.readyState);
if(xhr.readyState==4&&xhr.status==200){
var msg = xhr.responseText;
s1.innerHTML = msg;
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="发送ajax请求"
onclick="sendRequest1();"/>
<hr/>
<input type="text" id="name" onblur="sendRequest2();"/>
<span id="name_span"></span>
</body>
</html>
HelloServlet.java
package com.ajax.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 req,HttpServletResponse res)
throws ServletException,IOException {
res.setContentType("text/html;charset=utf-8");
PrintWriter pw = res.getWriter();
System.out.println("哈喽 ajax");
pw.print("哈喽 ajax");
pw.close();
}
}
CheckServlet.java
package com.ajax.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 req,IOException {
req.setCharacterEncoding("utf-8");
res.setContentType("text/html;charset=utf-8");
//接收请求参数
String name = req.getParameter("name");
//get解决乱码方法
//name = new String(name.getBytes("iso8859-1"),"utf-8");
System.out.println(name);
String age = req.getParameter("age");
System.out.println(age);
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//检查
PrintWriter pw = res.getWriter();
if("scott".equals(name)){
//用户名被占用
pw.print(name+":用户名被占用");
}else{
//用户名可用
pw.print(name+":用户名可用");
}
pw.close();
}
}
原文链接：https://www.f2er.com/ajax/162389.html