本文详细介绍了Ajax的工作原理和技术特点，包括局部刷新、异步传输的优势，以及如何通过XMLHttpRequest对象实现与服务器的交互过程。此外，还探讨了JSON数据格式及其在Ajax中的应用，并通过实例展示了如何利用jQuery简化Ajax开发。
二十三Ajax
1.特点
局部刷新
异步传输
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02CoeA2j-1604470936651)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464193782.png)]
2优点
节省带宽
减轻服务器压力
加快相应速度
3.实现步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K5Po4kqi-1604470936654)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464187451.png)]
1.创建XMLHttpRequest对象
xmlHttpRequest = new XMLHttpRequest();
2.与服务端获得连接
xmlHttpRequest.open(method,URL,async)
建立与服务器的连接，method参数指定请求的http方法，典型的值是GET(超链接等)/POST(表单)，URL
参数指定请求的地址，async参数指定是否使用异步请求，其值为true/false
例：xmlHttpRequest.open(“get”,“userServlet?name=”+name,true);
3.向服务器发送请求信息
send(content)
发送请求，content参数指定请求的参数
例：xmlHttpRequest.send(“a=10”); //以get方式提交时，请求信息是不能到达服务器端的。
4.指定回调函数接收响应信息
xmlHttpRequest.onreadystatechange=reback;
5.创建回调函数，根据响应状态动态刷新页面
xmlHttpRequest.readystate XMLHttpRequest的状态信息
0 XMLHttpRequest对象没有完成初始化
1 XMLHttpRequest对象开始发送请求
2 XMLHttpRequest对象的请求发送完成
3 XMLHttpRequest对象开始读取响应，还没有结束
4 XMLHttpRequest对象读取响应结束
xmlHttpRequest.status HTTP的状态码
200 服务器响应则正常
400 无法找到请求资源
403 没有访问权限
404 访问的资源不存在
500 服务器内部错误
xmlHttpRequest.responseText 获得响应的文本内容
xmlHttpRequest.responseXML 获得响应的XML文档对象
例：
function reback(){
var span1=document.getElementById(“sp”);//找到span元素
if (xmlhttp.readyState == 4){//服务端响应结束
if (xmlhttp.status == 200) {//服务端响应成功
var res=xmlhttp.responseText;//responseText表示请求完成后，返回的字符串信息
if(res!= null){
span1.innerHTML=res;
} else{
span1.innerHTML=“接收到的响应信息为空!”;}
}
}
}
1jspAjax.jsp
<script type="text/javascript">
//1.创建XMLHttpRequest对象
var xmlHttpRequest;
function doAjax(){
xmlHttpRequest = new XMLHttpRequest();
}
//2.定义一个函数
function checkName(){
var name=document.getElementById("um").value;
//1.创建XMLHttpRequest对象
doAjax();
//2.与服务器取得连接
xmlHttpRequest.open("get","userServlet?name="+name,true);
//3.向服务端发送请求信息
xmlHttpRequest.send("a=10");//以get方式请求提交，请求信息不能到达服务端
//4.通过回调函数接收响应信息
xmlHttpRequest.onreadystatechange=reback;
}
//3.回调函数
function reback(){
alert("xmlHttpRequest.readyState:"+xmlHttpRequest.readyState+"\txmlHttpRequest.status:"+xmlHttpRequest.status)
var span=document.getElementById("sp");//找到span元素
//匿名函数
if(xmlHttpRequest.readyState==4){//服务器响应结束
if(xmlHttpRequest.status==200){//服务器响应成功
var res=xmlHttpRequest.responseText;
//var res1=eval("("+res+")");//对JSON格式的数据解析
//json是一种文本字符串，被存储在responseText属性中
//js需要使用eval语句将responseText转化为Json格式
if(res!=null){
span.innerHTML=res;
}else{
span.innerHTML="接收到的响应信息为空";
}
}
}
}
</script>
<body>
<h2>用户注册</h2>
<form action= "" method= "post" >
用户名: <input type= "text" id= "um" onBlur="checkName()" name= "uname" /><span
id= "sp" ></span><br/>
密码: <input type= "password" name= "upass1" /><br/>
确认密码: <input type= "password" name= "upass2" /><br/>
Email: <input type= "text" name= "uemail" /><br/>
</form>
</body>
web.xml
<!-- 配置ajax的servlet -->
<servlet>
<servlet-name>jspAjaxServlet</servlet-name>
<servlet-class>S1103Ajax.S1JspAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jspAjaxServlet</servlet-name>
<url-pattern>/1103Ajax/userServlet</url-pattern>
</servlet-mapping>
S1103Ajax.S1JspAjaxServlet.java
public class S1JspAjaxServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//若响应的数据格式为 XML 文档格式，则必须设置以下信息
//resp.setContentType("text/xml;charset=UTF-8");
System.out.println("进入jspajaxservlet");
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String a=request.getParameter("a");
String username=new String(name.getBytes());
System.out.println("username:"+username);
if("li".equals(username)){
PrintWriter out=response.getWriter();//输出流
out.write("该用户存在");
out.close();
}else{
PrintWriter out=response.getWriter();//输出流
out.write("该用户不存在"+username+"可注册");
out.close();
out.close();
}
}
}
4.JSON数据格式
JavaScript Object Notation java对象标记
JavaScript原生格式，一种轻量级的数据交换格式
1.JS数据格式
对象是一个无序的“键/值”的集合，一个对象以"{"(左括号)开始}(右括号)结束，每个名称后面跟:(冒号)，名称/值对之间使用,(逗号)分割
-
json对象用{}(大括号)表示 {名称 1:值 1,名称 2:值 2}
-
json数组用[](中括号)表示 [值1,值2,值3,值4]
-
映射用:(冒号)表示 名称:值
-
并列数据之间用,(逗号)分割 名称1:值1,名称2:值2
<script type="text/javascript">
//1.定义JSON对象
var person={
"name":"李四",
"sex":"男",
"age":22,
address:"江西南昌"
}
document.write(person.name+"<br/>");
//2.定义JSON数组
var arr=["lisi","zhangsan","wangwu"];
document.write(arr[1]+"<br/>");
var persons=[{"name":"李四","sex":"男","age":23,"address":"江西南昌"},
{"name":"李逵","sex":"男","age":34,"address":"梁山"}
];
document.write(persons[1].name+"<br/>");
//3.JSON对象数组嵌套
var objArr={"阿凡达":"左雪昌","特点":"吊毛","特性":["迭代","上下车",{"速度快":{"少读":"少读5分钟"}}]};
document.write(objArr.特性[2].速度快.少读);
</script>
2.Json数据嵌套
json数据格式中，key只能为字符串类型，而value可以是基本数据类型，也可以为Json数组或Json对象(则嵌套对value进行)
<script type="text/javascript">
//3.JSON对象数组嵌套
var objArr={"阿凡达":"左雪昌","特点":"吊毛","特性":["迭代","上下车",{"速度快":{"少读":"少读5分钟"}}]};
document.write(objArr.特性[2].速度快.少读+"<br/>");
var all=[{
"name":"李连杰",
"sex":"男",
"address":[
{"one":"江西南昌市红谷滩新区23号"},
{"two":"江西抚州赣东大道213号"}]
},
{
"name":"吊毛"
}
]
document.write(all[0].address[1].two);
</script>
json是一种文本字符串，被存储在responseText属性中
js需要使用eval语句将responseText转化为Json格式
例：var res1=eval("("+xmlHttpRequest.responseText+")");//转化为SON格式的数据
3.特点
优点
一种数据传输格式，json和XML相似，但是更加灵巧
且不需要从服务器内部发送含有特定内容的首部信息
缺点
语法过于严谨
代码不易读
eval 函数存在风险
5.Jquery和Ajax结合使用
1.传统Ajax不足
方法、属性、常用值较多不好记忆
步骤繁琐
浏览器兼容问题
2.jQuery常用Ajax方法
-
$.ajax()
-
$.get()
-
$.post()
$.ajax(url,[settings]);
方法：
1. function beforeSend(XMLHttpRequest xmlHttpRequest) 发送请求前调用的函数 1. xmlHttpRequest 可选 2. function complete(XMLHttpRequest xmlHttpRequest,String s)请求完成后调用的函数 1. xmlHttpRequest 可选，由服务器返回的数据 2. s 可选，描述请求类型的字符 3. function success(Object result,String s) 请求成功后调用的函数 1. result 可选，由服务器返回的数据 2. s 可选，描述请求类型的字符串-
function error(XMLHttpRequest xmlHttpRequest,String em,Exception e) 请求失败时调用的函数
- xmlHttpRequest 可选
- em 可选，错误信息
- e 可选，捕获的异常对象
属性：
- String url 发送请求的地址
- String type 请求方式
- Number timeout 设置请求超时时间
- Object data 发送到服务器的数据
- String dataType 预期服务器返回的数据类型，例：XML,HTML,JSON,TEXT
- blobal 表示是否触发全局Ajax事件，默认为true
2jQueryAjax.jsp <script type= "text/javascript" src= "../js/jquery-1.8.2.js" ></script> <script type= "text/javascript" > $( function(){ $("#um").blur( function(){ $.ajax({ type:"get", url: "3jQueryAjaxFoeward.jsp", dataType:"json", data: "uname="+this.value, timeout:3000, success: function(msg){ //表示响应成功 // alert(msg); if($.trim(msg)=="true"){ $("#sp").html("该用户名存在!"); } else{ $("#sp").html("该用户名不存在，可以使用!"); } }, error: function() { //请求失败后要执行的代码 alert("Ajax请求失败"); } } ); }); }); </script> <body> 用户名: <input type= "text" name= "uname" id= "um" /> <span id= "sp" /></span> </body>3jQueryAjaxFoeward.jsp <% //注意此时在该页面中加入脚本时，html等代码不要加入，否则服务器端响应的数据内容就 //不是true或false String name=request.getParameter("uname"); //System.out.println("xingming="+name); //注意此时在该页面中加入脚本时，html等代码不要加入，否则服务器端响应的数据内容就不是true或false if("li".equals(name)){ out.print("true"); } else{ out.print("false"); } %> -
扫一扫
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
