频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
初识AJAX
2016-09-05 09:52:54         来源:tang_fei的博客  
收藏   我要投稿

这几天一直在看书,大致了解了AJAX技术,在这里做一个小小的总结。
首先要明白:什么是AJAX?
通过查阅维基百科我们可以看到这样一段话:AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。
那么,现在我们可以对它有一个大致的了解,AJAX=JavaScript+XML。而js和xml我们应该都不陌生
其次,AJAX有什么用?
现在回顾我们的开发旅程,在原来开发Servlet+JSP+JavaBean的过程中,我们的Web应用允许用户在网页端填写并提交表单(form),而发出表单时就向网页服务器发送了一个请求(Request)。服务器接收该请求并处理传来的表单,然后送回一个新的网页,随后展示在浏览器上,这样就完成了一次用户与服务器的交互。这种情况有一些很大的问题。
这种方法浪费了许多带宽。现在看这样一个例子:浏览器端展示了用户登陆界面,当用户输入用户名、密码及验证码后,数据被发送到了服务器,假定我们在Servlet中处理请求后发现用户名及密码不匹配,我们接下来做了什么?
我们重新将页面连同错误信息发送给了浏览器端!而在前后两个页面中的大部分HTML代码除了错误信息全都是相同的。
这种方法用户体验太差。假设用户不小心输入了错误的用户名,就会出现在等待半天后页面被刷新并提示用户名错误,这样用户又得重新输入一遍。在用户的网速比较慢的情况下,这种模式的用户体验就更差了。
那么有没有什么方法可以解决这种问题呢?
在XMLHttpRequest对象出现之前是没有办法的,但是在它出现之后,前辈们就想到了一种比较好的解决方法,即:使用XMLHttpRequest对象作为Agent来将请求发送给服务器,并用它来接收服务器返回的数据,这样就可以不跳转页面完成数据的交互,而且只需要传输少量必要数据,因此对网速的要求也变低了。
那么剩下的两个问题就是:
1.如何根据服务器端返回的数据动态更改页面,以达到与用户交互的作用?
2.如何规定服务器发送回来的数据格式,使它更通用,并且传输量尽可能的少呢?
对于1:前辈们选择了使用JavaScript,个人理解这样做的原因有两个,第一,JavaScript足够流行,几乎所有的主流浏览器都对JavaScript提供了支持;第二,JavaScript可以通过DOM编程的方式来动态的改变网页的内容。
对于2:前辈们选择了XML,我想可能是因为它语法足够严格、语义明确而且更加通用吧。但是我认为传输的数据格式对使用AJAX并没有影响。例如,我们可以选择传输Json来使传输的数据更加少,甚至可以选择传输一段有意义的字符串,只要服务器端与浏览器端开发者对格式进行了约定即可。
现在,我们就可以定义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状态码来查看消息的状态,并确定在何种情况下我们要进行何种操作。
这个过程是这样的:

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

XMLHttpRequest的重要属性
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);

open及send方法介绍
这样,一个简单的AJAX过程就完成了。
一些没有用到的小知识点:

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

下面是我做的一个完整的Demo:
register.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.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。

点击复制链接 与好友分享!回本站首页
相关TAG标签 初识AJAX
上一篇:js基础动画组件
下一篇:JSP内置对象
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站