搜索

首页 >web前端 >js教程 >ajax是怎么出现的？ajax是如何开发的？（总结篇）

ajax是怎么出现的？ajax是如何开发的？（总结篇）

寻∝梦
寻∝梦原创
2018-09-10 14:26:501950浏览

本篇文章主要的介绍了关于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);
        }
    };

28.png

  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);

27.png  这样，一个简单的AJAX过程就完成了。
  一些没有介绍的小知识点：

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

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

register.html
<!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跨域访问的分析（前端和后端）下一篇：附带cookie如何实现ajax跨域请求

相关文章

查看更多