初探Ajax异步请求

初探Ajax异步请求

2017-04-15 Anthony jing是风景的景

初探Ajax异步请求

如果我真的存在，也是因为你需要我。——克莱尔•麦克福尔

  Ajax已经不是新鲜事了，但是今天还是想拿出来讲一讲，以便于对Ajax有个更清晰的认识。可以说Ajax解决了网页异步刷新的问题，提高了系统的性能，增强了用户体验。以下是来自百度的ajax一段介绍。

• AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

• AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

• AJAX 是一种用于创建快速动态网页的技术。

• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

    其中最关键的一个词就是局部刷新，传统网页需要重新加载页面，也就是重新加载所有资源会耗费网络带宽，增加服务器压力，然而Ajax却完美的解决了这一切。

利用原生的JavaScript实现Ajax

获取XMLHttpRequest

    原生的JavaScript实现Ajax最重要的就是XMLHttpRequest对象，此 对象用于在后台与服务器交换数据，所以第一步就是获取这个对象，然而这个XMLHttpRequest在不同的浏览器获取方式是不同的。

var url = "http://localhost:8080/my-web-app/AjaxServlet";        
function getRequest() {            
    var xmlHttp = null;            
    try {// Chrome, Firefox, Opera, Safari        xmlHttp = new XMLHttpRequest();    } catch (e) {                
        try {// Internet Explorer            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");        } catch (e) {                    
            try {// Internet Explorer
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e) {                alert("your browser not support ajax!");            }        }    }            
    return xmlHttp;
}

    以上代码是获取一个XMLHttpRequest对象

• 针对Chrome, Firefox, Opera, Safari可以直接new XMLHttpRequest()；

• 针对IE7以上可以new ActiveXObject("Msxml2.XMLHTTP")；

• IE7一下就要new ActiveXObject("Microsoft.XMLHTTP")；

发送GET/POST请求

    获取了XMLHttpRequest对象之后就可以发送Ajax请求了，废话不多说直接看代码。

function doGet(){     var xmlHttp = getRequest(); //初始化xmlhttp对象    xmlHttp.open("GET",url);     xmlHttp.send();     xmlHttp.onreadystatechange = function() {         if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 
        {            console.log(xmlHttp.responseText);         } else {             console.log(xmlHttp.readyState);        }     }}

这就是GET方式的请求格式，url我在最上面直接做了全局的变量，所以这里就直接用了，成功的标志就是status==200,相必大家对200状态吗很熟悉了，同时你还熟悉的404状态码，资源未请求到，以及500状态码服务器出错。这里要说的还有readyState这个标志。

XMLHTTP 的 readyState 值含义：

• 0－未初始化，即尚未调用 open。

• 1－初始化，即尚未调用 send。

• 2－发送数据，即已经调用 send。

• 3－数据传送中。

• 4－完成。

这里我特意输出了一下readyState,现在来看一下结果。

可以看出其中readyState执行了2 和 3状态。接下来是POST

function doPost(){     var xmlHttp = getRequest();     var data = "param=js_ajax";    xmlHttp.open("POST",url);     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");     xmlHttp.send(data);     xmlHttp.onreadystatechange = function() {         if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) 
        {             console.log(xmlHttp.responseText);         } else {             console.log(xmlHttp.readyState);        }     } } 

与GET方式不同，POST可以send参数就是这里的

var data = "param=js_ajax"

还有一点就是设置请求头的Content-Type为application/x-www-form-urlencoded

才能被后台正确解析不然默认是text/plain

下来我们来看结果：

和GET一样输出了2 和 3状态，同时我把输入的参数传回来了js_ajax

xmlHttp.responseText这就是响应的信息，你可以在这里获取并做一些逻辑处理。

以上就是原生JavaScript实现的Ajax，下来我们来看JQuery怎么实现的。

---

利用JQuery实现Ajax

由于JQuery对JavaScript做了很好的封装，所以使用JQuery的Ajax可要方便的多了，直接看代码分析。

function jqAjax(){    $.ajax({        type:'POST',        url:"http://localhost:8080/my-web-app/AjaxServlet",        contentType:"application/x-www-form-urlencoded",        data:{"param":"jquery"},        success:function(data){                   
         console.log(data);        },        error:function(data){                  
            console.log("fail");        }    })}

相对来说简单清晰，设置好参数就可以。

• type：类型（GET/POST常用的）；

• url：请求的地址；

• contentType：请求头类型，其实这里默认就是它，写出来是注意一下；

• data：请求参数；

• success：成功后的回调函数；

• error：出错后的回调函数

这是请求结果，依旧把参数给传回来了 "jquery"

这里要注意的是contentType，来看这张图

只有在application/x-www-form-urlencoded这种请求头才是Form Data,后台才能用request.getParameter("param")获取到参数，如果请求头是application/json

那么这里是Request Payload在后台无法通过request.getParameter("param")获取。

下来咱们再补充两个比较重要的参数设置

• async

  类型：Boolean

  默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

  注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

• dataType

  类型：String

  预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。

  可用值:

  xml:返回 XML 文档，可用 jQuery 处理。

  html:返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行

  script:返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

  json:返回 JSON 数据 。

  jsonp:JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

  text：返回纯文本字符串
  

dataType不用多说，现在想说一下async，默认是true，也就是异步请求，所谓异步就是不用等结果回来我可以执行下一步，曾经某位同学在这里吃过亏，他写的代码总是第一个请求结果还没出和第二个请求代码就已经执行，这就是异步的效果。所以如果你像让结果返回之后再执行别的代码就一定要把async改为false！

下面让你感受一下异步机制，这个来自于一个面试题，不知你是否看过

function demo(){           
    for(var i=0;i<5;i++){       setTimeout(function(){                   
           console.log('i:',i);       },1000);    }           
    console.log(i);}

结果是什么？？？如果你不知道，一定要亲自试试！（setTimeout是异步的）

---

最后贴出后台的代码

protected void doGet(HttpServletRequest request,
     HttpServletResponse response) throws ServletException, 
     IOException {
        String rs = "hello Ajax,this request from GET";        PrintWriter out = response.getWriter();        out.write(rs);        out.flush();        out.close();}protected void doPost(HttpServletRequest request,
     HttpServletResponse response) throws ServletException, 
     IOException {
        String rs = "hello Ajax,this request from POST";
        String param = request.getParameter("param");
        if(null!=param){            rs = rs+"(param is "+param+")";        }        PrintWriter out = response.getWriter();        out.write(rs);        out.flush();        out.close();}

好了，就到这里吧，下次见！

后台发送：我要看答案

就能收到最后那道题的答案哦！

If U are satisfied，Please continue to pay attention~

---

如果你还满意就请持续关注我，并把文章分享给你的朋友，谢谢！

Hello，伙伴们长按二维码关注我们吧！