Ajax请求专题

一，什么是AJAX?

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和 XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

二，AJAX的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：

三，AJAX请求的五个步骤 

1.建立XMLHttpRequest对象;
2.设置回调函数;
3.配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
4.向服务器发送数据;
5.在回调函数中针对不同的响应状态进行处理;

1.创建XMLHttpRequest异步对象

var xhr;  //定义一个变量,用于存放XMLHttpRequest对象
if(window.XMLHttpRequest) { 
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xhr = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.设置回调函数 

xhr.onreadystatechange = callback；

3.使用open方法与服务器建立连接 

// get 方式
xhr.open("get", "test.php", true)

// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4.向服务器发送数据

// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")

 5.在回调函数中对不同的响应状态进行处理

function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}

ajax中的五种状态码

• 0：请求未初始化

• 1：服务器连接已建立(已调用open方法，但还未调用send)

• 2：请求已接收(已调用send方法)

• 3：请求处理中(请求已到达服务端，正在处理)

• 4：请求已完成，且响应已就绪

• 状态： 200——正确、404——未找到页面、500——错误

四，jQuery.Ajax 

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery Ajax 方法，我们可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON，同时能够把这些外部数据直接载入网页的被选元素中。

jQuery Ajax本质就是 XMLHttpRequest，对它进行了封装，方便调用。--狂神笔记

请求的一般格式

$.ajax({
            url: "http://localhost:8081/getUser", //要请求的后端地址
            type: "GET", //数据发送的方式(POST或者GET)
            data: {val1: "1", val2: "2"}, //需要传递的参数
            dataType: "json", //后端返回的数据格式
            success: function (result) {//ajax请求成功后触发的方法
                console.log(result); //result为响应内容
            },
            error: function () {//ajax请求失败后触发的方法
                console.log('Send Request Fail..');
            }
        });

type类型为GET

<script type="text/javascript">
        $("#testId").click(function () {
            $.ajax({
                url: "http://localhost:8081/system/basic/department/",
                type: "GET",
                data: {"id": 100},
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    console.log(result.obj.enabled);
                    $("#text1").val(result.msg);
                    alert("ajax请求成功！");
                }
            });
        });
    </script>

type类型为POST

对于POST来说，我们提交data时需要注意：

①data的数据格式：一般来说是json字符串格式，当我们提交表单数据时，我们会将其存储在一个数组或者对象里，而这种格式是不符合ajax请求的数据格式，这时，我们可以利用JSON.stringify()方法将其转化为JSON字符串。

②ajax请求头(header)的Content-Type字段，数据发送出去，服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以，这时我们需要设置请求头。
 

 <script type="text/javascript">
        $("#testId").click(function() {
            $.ajax({
                url: "http://localhost:8081/system/basic/department/pos",
                type: "POST",
                data: JSON.stringify({
                        "id":"96",
                        "name":"运维4部",
                        "parentId":"92",
                        "depPath":"1.4.5.92.96"
                    }),
                contentType: 'application/json',
                dataType: 'json',
                success: function(result) {
                    console.log(result);
                    alert("ajax请求成功！");
                }
            });
        });
    </script>

 

Ajax轮询请求

Ajax轮询请求：客户端是按照规定时间(这个时间由你设定，如：2秒)向服务端发送请求，前一次请求完成后，无论有无结果返回，2秒之后下一次请求又会发出。

本次实验为Ajax轮询请求后端接口，以后端接口返回的某个数据为条件，每3秒进行一次Ajax请求，当数据符合条件时，在页面显示PDF，并结束轮询。
使用到：PDFObject.js、setInterval()、claerInterval()

<script type="text/javascript">
        $(function(){
            var parentId,status;
            function getResult(){
                $.ajax({
                    url: "http://localhost:8081/system/basic/department/",
                    type: "GET",
                    data: {"id":100},
                    dataType: 'json',
                    success: function(result) {
                        parentId = result.obj.parentId;
                        if (parentId==90){//当parentId等于90时，加载pdf,并且停止轮询
                            PDFObject.embed("http://localhost:8081/system/basic/department/getPdfFile", "#viewPDF");
                            clearInterval(status);
                        }
                    }
                });
            }
            if(parentId!=90){//当parentId不等于90时，每3秒做一次ajax轮询请求
                status = setInterval(getResult, 3000);
            }
        });
    </script>

后端接口：返回pdf流。

@GetMapping("/getPdfFile")
@CrossOrigin(value = "http://localhost:8080")
public void getPdfFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
        BufferedInputStream bis = null;
        OutputStream os = null;
        try {
            byte[] buf = new byte[1024];
            int len = 0;
            response.reset();
            response.setContentType("application/pdf;charset=utf-8");
 
            String pdfPath = "E:\\iotest\\javase.pdf";
            File file = new File(pdfPath);
            if (file.exists()) {
                FileInputStream fis = new FileInputStream(pdfPath);
                if (fis != null) {
                    bis = new BufferedInputStream(fis);
                    os = response.getOutputStream();
                    while ((len = bis.read(buf)) != -1) {
                        os.write(buf, 0, len);
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (bis != null) {
                bis.close();
            }
            if (os != null) {
                os.close();
            }
        }
    }