Ajax

Ajax (Asynchronous)

Posted by 余腾 on 2019-04-28
Estimated Reading Time 3 Minutes
Words 926 In Total
Viewed Times

一、Ajax 简介

允许浏览器与服务器通信而无须刷新当前页面的技术。

Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起。

  • 服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
  • XML：Ajax 程序需要某种格式化的格式来在服务器和客户端之间传递信息。
  • XHTML：使用扩展超媒体标记语言和CSS (Cascading Style Sheet)标准化呈现。
  • DOM：实现动态显示和交互。使用 XMLHTTP 组件 XMLHttpRequest 对象进行异步数据读取—使用 JavaScript 绑定和处理所有数据

二、XMLHttpRequest 对象

该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。是创建Ajax应用的最佳选择，实际上通常把Ajax当成XMLHttpRequest对象的代名词

XMLHttpRequest 复用函数

1
2
3
4
5
6
7
8
9
function getHTTPObject(){
    var xhr = false;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject){
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

XMLHttpRequest 方法

方法 描述
abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键值对返回。
getResponseHeader() 返回指定首部的串值。
open(method,url) 建立对服务器的调用。
send(content) 向服务器发送请求。
setRequestHeader(“header”,”value”) 把指定首部设置为提供的值。

XMLHttpRequest 属性

属性 描述
onreadystatechange 每个状态改变都会触发这个事件处理器。
readyState 请求的状态，有5个可取值。0(未初始化)，1(正在加载)，2(已经加载)，3(交互中)，4(完成)
responseText 服务器的响应，表示为一个串
responseXML 服务器的响应，表示为XML。可以解析为DOM对象
status 服务器的HTTP状态码(200对应OK)
statusText HTTP状态码的相应文本

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
  <head>
    <title>Ajax</title>
  </head>
  <script type="text/javascript">

      window.onload = function(){

          document.getElementsByTagName("a")[0].onclick = function () {

              //获取 XMLHttpRequest 对象
              var request = new XMLHttpRequest();

              //方法 GET 准备发送请求的数据 url
              var method = "GET";
              var url = this.href;

              //调用 XMLHttpRequest 对象的 open方法
              request.open(method,url);

              //post 请求
              <!--request.setRequestHeader("ContentType","application/x-www-form-urleccoded");
              request.send("name='Ajax'");-->

              //调用 XMLHttpRequest 对象的 send 方法
              request.send(null);

              //为 XMLHttpRequest 对象添加 onreadystatechange 响应函数
              request.onreadystatechange = function () {

                  //判断响应是否完成; XMLHttpRequest对象的 request.status 属性值为4的时候
                  if(request.readyState == 4){
                      //再次判断响应是否可用：XMLHttpRequest 对象 status 属性值为 200
                      if(request.status == 200 || request.status == 304){
                          alert(request.responseText);
                      }
                  }
              }
              //取消节点的默认行为
              return false;
          }
      }
  </script>
  <body>

  <a href="ajax.txt">Ajax</a>

  </body>
</html>

三、Json

eval： 可以把一个字符串转为本地JS代码执行(存在风险)。

1
2
var Str = "alert('eval')";
eval(Str)

JQuery 中的 Ajax

JQuery 对 Ajax 操作进行了封装，在JQuery中最底层的方法是 $.ajax()
第二层是 load()、$.get()、$.post()
第三层是 $.getScript()、$.getJSON()

load(url, [data], [callback])

  • url:待装入 HTML 网页网址。
  • data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
  • back:载入成功时回调函数。

载入远程 HTML 文件代码并插入至 DOM 中。
任何一个 html 节点都可以使用 load 方法加载Ajax，结果直接插入html节点中。

Jackson

  • 1、创建 org.codehaus.jackson.map.ObjectMapper 对象。
  • 2、调用 ObjectMapper 的 writerValueAsString 方法把 Java 对象或集合转换为 Json。
  • 3、注意：
    • a、Jackson 根据 getter 来定位 Json 对象的属性，而不是字段名。
    • b、可以在 getter 方法上添加注解 org.codehaus.jackson.annotate.JsonIgnore 忽略该字段。

感谢阅读

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS
Ajax
FRIENDS
ESC