首頁 > 文章 > web前端 > ajax是怎麼出現的？ ajax是如何開發的？（總結篇）

ajax是怎麼出現的？ ajax是如何開發的？（總結篇）

寻∝梦原創: 2018-09-10 14:26:501892瀏覽

這篇文章主要的介紹了關於ajax的背景定義，還有關於ajax的個人使用總結，現在就讓我們一起來看看這篇文章吧

本文有如下幾個內容：

什麼是AJAX
#AJAX出現的背景
##AJAX的原理
AJAX的定義
AJAX的開發步驟
一個簡單的demo
AJAX技術的優缺點

什麼是AJAX？

透過查閱維基百科我們可以看到這樣一段話：
AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。

那麼，現在我們現在就有一個大致的印象了，AJAX=JavaScript XML。而js和xml我們應該都不陌生。
AJAX出現的背景
回顧我們的開發旅程，在原來使用Servlet JSP JavaBean開發的過程中，我們的Web應用程式允許使用者在網頁端填寫並提交表單（Form），以向網頁伺服器發送請求（Request）。伺服器接收請求並處理傳來的表單，回傳回應(Response)，瀏覽器取得回應後，透過解析將頁面展示在瀏覽器上，這樣就完成了一次使用者與伺服器的互動。
然而，這種模式存在一些問題。現在看這樣一個例子：瀏覽器端展示了用戶登陸介面，當用戶輸入用戶名、密碼及驗證碼後，資料被發送到了伺服器，假定我們在Servlet中處理請求後發現用戶名及密碼不匹配，我們接下來會做什麼？
我們會重新將頁面連同錯誤訊息的回應傳回瀏覽器端，瀏覽器在解析回應後對資訊進行展示，使用這樣的開發流程，無論業務實現的多麼完美都會有一些固有的問題：
首先，浪費頻寬。 在前後兩個頁面中除了展示錯誤訊息的部分外其它元素全都是相同的。
其次，使用者體驗差。 假設用戶在表單中不小心輸入了錯誤的用戶名，在提交表單後就會出現等待一段時間後頁面被刷新、並提示用戶名錯誤的情況，這樣用戶又得重新輸入一遍用戶名及密碼，體驗極不友善。在使用者的網路速度比較慢的情況下，使用者體驗還會更差。
那麼有沒有什麼方法可以解決這種問題呢？也就是，能不能在使用者剛輸入使用者名稱時就可以得到回饋呢？
AJAX的大致思路
在js的XMLHttpRequest物件出現之前是沒有辦法的，但是在它出現之後，前輩們想到了一種比較好的解決方法，即：使用XMLHttpRequest物件作為Agent來將請求發送給伺服器，並用它來接收伺服器返回的數據，這樣就可以不跳轉頁面完成數據的交互，而且只需要傳輸少量必要數據，因此對網速的要求也變低了。
但是，還有兩個問題沒有解決：
1. 如何根據伺服器端傳回的資料動態變更頁面，以達到與使用者互動的作用？
2.如何規定伺服器發送回來的資料格式，使它更通用，並且傳輸量盡可能的少呢？
對於1：前輩們選擇了使用JavaScript，個人理解這樣做的原因有兩個，第一，JavaScript足夠流行，幾乎所有的主流瀏覽器都對JavaScript提供了支援；第二，JavaScript可以透過DOM程式設計的方式來動態的改變網頁的內容。
對於2：前輩們選擇了XML，我想可能是因為它語法足夠嚴格、語義明確而且更加通用吧。但是我認為傳輸的資料格式對使用AJAX並沒有影響。例如，我們可以選擇傳輸Json來使傳輸的資料更加少，甚至可以選擇傳輸一段有意義的字串，只要伺服器端與瀏覽器端開發者對格式進行了約定即可。
AJAX定義
現在，我們就可以定義AJAX了：AJAX 是一種用來建立快速動態網頁的技術。透過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。
AJAX技術的開發步驟
透過上面的介紹，我們知道了解決傳統的資源浪費問題的思路，現在就來看一下，如何來實現吧！
關於AJAX的實現，可以去查看W3School關於AJAX的介紹
下面是我簡單總結的AJAX實現步驟：
1. 我們需要一個XMLHttpRequest物件。（我們都知道IE低版本瀏覽器的標準很多都與主流標準不相容。很不幸，對於XMLHttpRequest物件也是一樣的….）
因此，一個XMLHttpRequest物件的取得過程是這樣的：

    var httpXml = null;    if(window.XMLHttpRequest){
        httpXml = new XMLHttpRequest();  //针对现代浏览器，IE7及以上版本
    }else if(window.ActiveXObject){
        httpXml = new ActiveXObject("Microsoft.XMLHTTP");  //针对IE5,IE6版本
    }

2.我們需要為這個XMLHttpRequest物件註冊它要進行的操作（透過回呼），並根據返回的請求狀態與HTTP狀態碼來查看訊息的狀態，並確定在何種情況下我們要進行何種操作。（想看更多就到PHP中文網AJAX開發手冊欄位中學習）

# 這個過程是這樣的：

    //为XMLHttpRequest对象的onreadystatechange属性注册
    httpXml.onreadystatechange=function(){
        //  在回调函数中根据请求状态与返回的HTTP状态码来选择相应的操作处理数据
        if(httpXml.readyState==4&&httpXml.status==200){
            alert(httpXml.responseText);
        }
    };

ajax是怎麼出現的？ ajax是如何開發的？（總結篇）

# 3.我們需要進行請求發送的參數設定。
這個過程是這樣的：

    //函数原型：open(method,url,async,username,password)    //method            --->请求方式:GET,POST或HEAD    //url               --->请求的地址  GET提交方式可以在后面加上参数    //async             --->请求是否异步执行，true---异步，false---同步   默认为true
    //username,password --->可选，为url所需的授权提供认证资格。如果不为空，会覆盖掉url中指定的资格
    httpXml.open("GET","http://localhost:8080/aaa/MyServlet",true);

4.要真正的發送請求啦！

    //  参数为请求参数,POST提交内容格式为--->"username=taffy&password=666",GET为----->空
    //  注意：若为POST请求方式，还需设置一个http请求头(应该位于open之后,send之前)
    // 即 setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");    标志form表单的enctype属性
        httpXml.send(null);

ajax是怎麼出現的？ ajax是如何開發的？（總結篇）这样，一个简单的AJAX过程就完成了。
一些没有介绍的小知识点：

    //XMLHttpRequest属性
    responseText   得到返回的文本信息
    responseXML    得到返回的XML信息    //XMLHttpRequest的方法
    getResponseHeader()   得到指定头部信息    getAllResponseHeaders() 将 HTTP响应头部作为未解析的字符串返回    //XMLHttpRequest的控制方法
    abort()    取消当前响应，关闭连接，将readyState置0

下面是我做的一个简单的Demo：

<!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">

    <!-->onload:页面加载完成后调用 <-->
    window.onload = function(){
        var user = document.getElementById("my_user");        //获取XMLHttpRequest对象
        var httpXml = null;        if(window.XMLHttpRequest){
            httpXml = new XMLHttpRequest(); //针对现代浏览器，IE7及以上版本}else if(window.ActiveXObject){
            httpXml = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6版本
        }
        user.onblur=function(){
            httpXml.onreadystatechange=function(){
                if(httpXml.readyState==4&&httpXml.status==200){                    if(httpXml.responseText!="true"){
                        alert("用户名不存在");
                    }
                }
            };
            httpXml.open("GET","http://localhost:8080/aaa/MyServlet?user="+user.value,true);
            httpXml.send(null);
        }</script></head><body>
        <form action="http://localhost:8080/aaa/AnotherServlet">
            <input type="text" name="username" id="my_user">
            <input type="text" name="password" id="my_pass">
            <input type="submit" value="提交">
        </form></body></html>

MyServlet.java

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/**
 * Servlet implementation class MyServlet
 */@WebServlet("/MyServlet")public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;    /**
     * @see HttpServlet#HttpServlet()
     */
      public MyServlet() {        super();
    }    @override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String username = request.getParameter("user");        if (username!=null&&!username.equals("")) {            if (username.equals("admin")) {
                out.write("true");
            }else {
                out.write("false");
            }
        }else {
            out.write("false");
        }
        out.close();
    }    @override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

* 下面对AJAX的优缺点进行一下总结：*
优点：
能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
缺点：
1.它可能破坏浏览器的后退功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面（现代浏览器一般都可以解决这个问题）；
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

以上是ajax是怎麼出現的？ ajax是如何開發的？（總結篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jsonp跨域存取的分析（前端和後端）下一篇：jsonp跨域存取的分析（前端和後端）

看更多

ajax是怎麼出現的？ ajax是如何開發的？ （總結篇）

相關文章

ajax是怎麼出現的？ ajax是如何開發的？（總結篇）