ajax
1.是什么？
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术 ， 它并不是一种新的技术
ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
- 使用CSS和XHTML来表示。
- 使用DOM模型来交互和动态显示。
- 使用XMLHttpRequest来和服务器进行异步通信。
- 使用javascript来绑定和调用。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
2.有什么用？
传统的网页，如果需要更新内容，必须加载整个网页。 如果只需要对网页上的某个内容进行局部刷新， 那么就需要使用到Ajax了。 它可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新 。 最典型的的例子， 莫过于大家在注册网站的时候， 输入的用户名，会自动的提示我们，该用户已被注册。
3.内部原理
Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。
那么现在给大家举个例子， 还是以咱们的判断用户名是否已被注册为例。
传统方式：
- 输入用户名，
- 点击一个按钮，校验。
- 把数据提交给服务器
- 服务器在后台帮助我们完成校验，并且反馈信息。
- 我们在浏览器上提示用户，给出结果
Ajax方式：
ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被 占用。那么它是如何工作的呢?
- 通过JS 获取咱们的输入框文本内容 document.getElementById("username").value
- 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
- 请求结束后，收到结果， 再使用 js 去完成提示。
- 可以在顺便配合 css 样式来增加提示效果。
xmlHttp对象创建方法:
//xmlHttp对象创建方法
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}请求状态监听函数：
/*readyState:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:
200: "OK"
404: 未找到页面
*/
//每当 readyState 改变时，就会触发 onreadystatechange 事件，类似于注册监听
request.onreadystatechange = function(){
//请求完成，并且响应就绪，并且返回的状态码为200
if(request.readyState == 4 && request.status == 200){
alert(request.responseText);
}
}4.简单样例：get&post
get.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//xmlHttp对象创建方法
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function get(){
//1.获取xmlHttp对象
var request = ajaxFunction();
//2.发送请求
// 3个参数: 请求方法是 请求路径 true---异步请求 false----同步请求
//.open(method,url,true/false);
request.open("GET","AjaxServlet?name=qg&age=19",true); //指定请求方法，和要请求的资源
request.send(); //发送
/*readyState:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:
200: "OK"
404: 未找到页面
*/
//每当 readyState 改变时，就会触发 onreadystatechange 事件，类似于注册监听
request.onreadystatechange = function(){
//请求完成，并且响应就绪，并且返回的状态码为200
if(request.readyState == 4 && request.status == 200){
alert(request.responseText);
}
}
}
</script>
</head>
<body>
<a href="" onclick="get()"><h3>ajaxGet异步请求</h3></a>
<div id="myDiv">
</div>
</body>
</html>post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//xmlHttp对象创建方法
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
function post(){
//获取 xmlHttp对象
var request = ajaxFunction();
//发送数据
request.open("POST","AjaxServlet",true);
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
alert(request.responseText);
}
}
//如果是post请求并且带有数据，需要添加请求头，说明提交的数据是经过url编码的表单
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=qg&age=19");
}
</script>
</head>
<body>
<a href="" onclick="post()"><h3>ajaxPost异步请求</h3></a>
<div id="myDiv">
</div>
</body>
</html>AjaxGetServlet.java
package ajaxServlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServlet
*/
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
//get请求解决中文乱码
//name = new String(name.getBytes("iso-8859-1"),"utf-8");
response.getWriter().write(name + ":" +age + "又回来了!");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
