AJAX：即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
优点：局部刷新,减少等待时间，节省很多的带宽
核心对象：XMLHttpRequest
步骤一：使用ajax发送get请求及处理响应
1：servlet配置如下：
package 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 RegisterServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name=request.getParameter("uname"); if(name.equals("admin")) { response.getWriter().write("OK"); } else { response.getWriter().write("NO"); } } }
2：重头戏，配置index.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> //给文本框注册一个失去焦点事件 window.onload=function(){ var dom=document.getElementById("txtName"); dom.onblur=function(){ myajax(); }; }; function myajax(){ //01.定制出 xhr对象 var xhr; //02.能力检测 if(window.XMLHttpRequest){ //非IE浏览器 xhr=new XMLHttpRequest(); }else{ //IE内核 xhr=new ActiveXObject("Microsoft.XMLHttp"); } var dom=document.getElementById("txtName"); var myspan=document.getElementById("msg"); var myval=dom.value; //03.构建请求地址 //xhr.open("请求类型","请求地址","是否异步"); xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true); //04.设置回调函数 响应回来的数据 xhr.onreadystatechange=function(){ //什么 if(xhr.readyState==4&&xhr.status==200){ //获取响应数据 var data=xhr.responseText; if(data=='OK'){ myspan.innerText="用户名已经被注册"; }else{ myspan.innerText="用户名可以注册"; } } }; //05.用send真正的发送请求 xhr.send(null); } </script> </head> <body> <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/> <input type="password" name="txtPwd"/> </body> </html>
步骤二：使用ajax发送post请求
servlet不变：在index.jsp中添加
window.onload=function() { var dom=document.getElementById("txtName"); dom.onblur=function() { myajax(); }; }; function myajax() { var xhr; if(window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else { xhr=new ActionXObject("Microsoft.XMLHttp"); } var dom=document.getElementById("txtName"); var myspan=document.getElementById("msg"); var myvalue=dom.value; xhr.open("post", "<%=path%>/servlet/RegisterServlet?uname="+myvalue,true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xhr.onreadystatechange=function() { if(xhr.readyState==4&&xhr.status==200) { var data=xhr.responseText; if(data=='OK') { myspan.innerText="用户名已经被注册"; } else { myspan.innerText="用户名可用"; } } }; xhr.send(data); }
使用GET和POST方式提交的区别
get：指定XMLHttpRequest对象的open()中的method参数为“get”
指定XMLHttpRequest对象的send方法中的data参数为null
post：1.指定XMLHttpRequest对象的open()方法中method参数为post
2.指定XMLHttpRequest对象要请求的HTTP头信息，该HTTP请求头为固定写法
指定XMLHttpRequest对象的send方法中的data需要传递具体的数据！
步骤三：使用jquery实现ajax
servlet不变，index.jsp代码如下：
//给文本框注册一个失去焦点事件 $(function(){ //等待页面上所有标签完毕后执行 var dom=$("#txtName"); dom.blur(function(){ myjquery(); }); }); function myjquery(){ var dom=$("#txtName"); $.ajax({ url:'<%=path%>/servlet/CheckUserServlet', type:'post', data:{uname:dom.val()}, success:function(today){ //today server 打到 浏览器的数据 alert(today); } }); }
比javascript方式简单多了，，，，
步骤四：初识json
JSON（即json）简介：
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成（网络传输速率）。
JSON语法规则：
JSON 语法是 JavaScript 对象表示语法的子集。
-
数据在名称/值对中
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
-
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
-
对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
-
数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。
-
//var json={"firstName":"yym","secondName":"myy","thirdName":"ymy"};
/*$.each(json,function(i,dom){
alert(dom);
});*/
/*var json=
{
"people":[
{"firstName":"孙悟空","lastName":"大闹天宫","email":"aaaa"},
{"firstName":"美猴王","lastName":"花果山山大王","email":"bbbb"},
{"firstName":"大圣","lastName":"天上各位尊神尊称他","email":"cccc"},
{"firstName":"弼马温","lastName":"人生第一份工作","email":"DDDD"}
]
};
$.each(json.people,function(i,dom){
alert(dom.firstName+"
"+dom.lastName);
});*/
var json={
"programmers": [{
"firstName": "Brett",
"lastName": "McLaughlin",
"email": "aaaa"
}, {
"firstName": "Jason",
"lastName": "Hunter",
"email": "bbbb"
}, {
"firstName": "Elliotte",
"lastName": "Harold",
"email": "cccc"
}],
"authors": [{
"firstName": "Isaac",
"lastName": "Asimov",
"genre": "sciencefiction"
}, {
"firstName": "Tad",
"lastName": "Williams",
"genre": "fantasy"
}, {
"firstName": "Frank",
"lastName": "Peretti",
"genre": "christianfiction"
}],
"musicians": [{
"firstName": "Eric",
"lastName": "Clapton",
"instrument": "guitar"
}, {
"firstName": "Sergei",
"lastName": "Rachmaninoff",
"instrument": "piano"
}]
};
$.each(json.programmers,function(i,dom){
alert(dom.firstName+"
"+dom.lastName);
});
注意：在此换行一直是“/n”,我一直忘记了哈哈！