初探Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/java__project/article/details/53593300

距离上次写博客也过去好几个月了（其中，也曾想要接着写，无奈...不记得密码了，九牛二虎之力又找回来了）

今天来说说这个Ajax，从最基本的开始吧，用的很多，更有甚者整个页面的请求都是用的Ajax，确实不容易啊！

Ajax:原理：

说白了，就是通过XMLHttpRequest对象来向服务器发起异步的请求，然后从服务器端获取数据，再用js来操作Dom从而更新页面的局部刷新效果。也挺简单的

代码实现：

接下来写一下最原始的写法用javascript来写下：(getqing'qiu)

<%@ 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">
function get() {
// 创建 XMLHTTPRequest 对象
var xhr = ajaxFunction();
// 设置监听器
xhr.onreadystatechange = function() {
// 响应状态
if(xhr.readyState == 4) {
// 状态码
if(xhr.status == 200) {
var data = xhr.responseText;
// 获取 div
var div = document.getElementById("div");
div.innerHTML = data;
}
}
}
// 打开链接
xhr.open("GET", "${pageContext.request.contextPath}/method?username=admin&password=123&time=" + new Date().getTime(), true);
// 发送数据
xhr.send(null);
}
// 创建一个 XMLHttpRequest 对象，利用此对象与服务器进行通信，是 AJAX 技术的核心
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;
}
</script>
</head>
<body>
<h1>AJAX的GET请求的入门</h1>
<input type="button" value="get请求的AJAX" οnclick="get()"><br/>
<div id="div" style="width: 300px; height: 300px; border: 1px solid black;"></div>
</body>
</html>

这里有很多需要注意的地方：

1.创建XMLHttpRequest对象，那么这里要根据浏览器的类型进行选择性的创建，例如上述代码中显示，IE浏览器创建的方式有所区别

2.另外异步请求一般分4步：

a.声明XMLHttpRequest对象

b.设置监听

一个是响应状态（0~5），分别是未发送请求（0），到响应完成（5），五个状态

另一个是响应状态码（200），代表服务器完响应，并且响应成功

c.打开链接

注意这里和post请求有所区别

另外请求路径后加时间戳是为了每次刷新不记录上次结果，就是避免缓存

d.发送数据

因为是get请求，那么数据不在请求正文中（具体细节请查看get请求和post请求的区别）

接下来是post请求：
1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <title>Insert title here</title>
7. <script type="text/javascript">
8. function post() {
9. // 创建XMLHttpRequest对象
10. var xhr = createXMLHttpRequest();
11. // 设置监听器
12. xhr.onreadystatechange = function () {
13. if(xhr.readyState == 4) {
14. if(xhr.status == 200) {
15. var data = xhr.responseText;
16. // 获取div
17. var div = document.getElementById("div");
18. div.innerHTML = data;
19. }
20. }
21. }
22. // 打开链接
23. xhr.open("POST", "${pageContext.request.contextPath}/method", true);
24. // 设置请求头
25. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
26. // 发送数据
27. xhr.send("username=张三&password=123");
28. }
30. // 创建一个 XMLHttpRequest 对象，利用此对象与服务器进行通信，是 AJAX 技术的核心
31. function createXMLHttpRequest(){
32. var xmlHttp;
33. try{ // Firefox, Opera 8.0+, Safari
34. xmlHttp=new XMLHttpRequest();
35. }
36. catch (e){
37. try{// Internet Explorer
38. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
39. }
40. catch (e){
41. try{
42. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
43. }
44. catch (e){}
45. }
46. }
48. return xmlHttp;
49. }
50. </script>
51. </head>
52. <body>
53. <h1>AJAX的GET请求的入门</h1>
54. <input type="button" value="POST请求方式" οnclick="post()">
55. <div id="div" style="width: 300px; height: 300px; border: 1px solid black"></div>
56. </body>
57. </html>
请注意：

post请求和get请求的区别：

1.请求参数的位置不同，get在路径后，post在正文中

2.post请求需要设置请求头信息

以上是用javascript进行编写的Ajax相当的麻烦！

那么jQuery就是一种轻量级的javascript框架，其中对ajax做了很好的封装，简便了太多

接下来代码演示下jQuery操作AJax:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head runat="server">
4. <title></title>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. 
7. <script src="../../jQuery/jquery-1.4.2.js"></script>
9. <script language="javascript">
10. $(function() {
11. $("#send").click(function() {
12. $.post("demo.jsp", {"username": $("#username").val(), "content": $("#content").val()}, function(responseText) {
13. var data = $.parseJSON(responseText);
14. $("#resText").html(data.username + " " + data.content);
15. }/* , "json" */);
16. });
17. });
18. </script>
19. </head>
20. <body>
21. <form id="form1">
23. <p>姓名: <input type="text" name="username" id="username" /></p>
24. <p>内容: <textarea name="content" id="content" >
25. </form >
首先用jQuery操作要引入jQuery的js文件：那么

接下提交表单进行异步验证非常简单（触发点击事件，发送用户名和密码到.jsp中进行验证，返回结果）

后边返回的结果又要用到JSON解析，这个东西下次再说吧！

总结：

Ajax优点：

1.最大的一点是页面无刷新，给用户的体验非常好
2.使用异步方式与服务器通信，不需要打断用户操作，具有更加迅速的响应能力
3.ajax 的原则是“按需取数据”，最大程度的减少冗余请求，减少服务器的负荷

Ajax缺点：

1.破坏浏览器后退按钮的正常行为，在动态更新页面后，用户无法回到前一个页面状态

2.依旧使用javascript作为Ajax的引擎，而js的兼容性。。还是个问题

说一下Ajax技术