侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Ajax 异步加载解析

前端  /  管理员 发布于 5年前   214

AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML)。它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。
那么,让我们一起走进AJax的世界吧。

基础语法

学习Ajax之前,我们要明确自己的需求,那就是在不刷新页面的前提下实现异步的与服务器进行交互,更新页面信息。使用Ajax其实也是很简单的,我们只需要遵循一定的步骤即可。
 •创建Ajax对象(原生的需要判断当前浏览器的类型)
 •设置回调函数 (完成与服务器的交互之后所触发的函数)
 •打开请求,并发送。(根据请求方式的不同,代码书写稍有不同)
 •客户端获得反馈数据,更新页面 

获取Ajax对象

不同的浏览器对Ajax的支持是不一致的,所以我们要区别的对待。

设置回调函数

设置回调函数的目的就是在Ajax完成与服务器的交互之后,将获取到的数据信息,添加到页面上。

通常我们会指定onreadystatechange函数作为我们的回调处理函数。

相关于Ajax与服务器交互有如下状态信息供我们在编码的过程找中参考。

.readystate

关于加载状态有如下几个常用的数值:
 •0: 请求未初始化
 •1: 服务器连接已建立
 •2: 请求已接收
 •3: 请求处理中
 •4: 请求已完成,且响应已就绪 

.status

加载结果的状态信息有:
 •200: “OK”

 •404: “未找到此页面”

 开启交互

一谈起交互,映入脑海的就是双方。也就是我们的ajax客户端和服务器之间的交互。所以我们需要明确请求数据在服务器上的位置

open(method,url,async) 

url的使用会根据method的不同而不同,这一点我们务必要清楚。至于asynchronous这个参数,一般来说对于数据量很小的请求可以采用false,但是建议使用true来进行异步的加载,来避免服务器压力过大。

 •GET方式 

只是用这种方式很简单,指定url在服务器上的位置即可。这里红色部分的理解相当的重要。我们务必指定url为请求在服务器上的位置,一般采用绝对路径的方式。

// 对Servlet来说指定其注解上的位置即可xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);  xmlhttp.send();

 •POST方式 

使用POST方式的时候,我们需要额外的多一项处理。如下例:

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 在send方法中指定要传输的参数信息即可xmlhttp.send("fname=Bill&lname=Gates");

客户端更新页面

对于Ajax来说,顾名思义。是采用xml形式来传输数据的。但是目前而言,这不再是唯一的一种形式了。那么我们怎么将获取到的数据更新到网页上呢?有如下两种方式。
 •如果来自服务器的响应并非 XML,请使用 responseText 属性。
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 •如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: 

xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt;

实例体验

了解了这些基础语法之后,我们就可以在实际的开发中简单的应用了。为了更好的完成此次实验,我先做了一个简单的JavaWeb,来处理我们的Ajax请求。

使用Servlet方式

AjaxServlet.java

package one;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 AjaxServlet */@WebServlet("/AjaxServlet")public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; /**  * @see HttpServlet#HttpServlet()  */ public AjaxServlet() {  super();  // TODO Auto-generated constructor stub } /**  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse  *  response)  */ protected void doGet(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  // TODO Auto-generated method stub  //response.getWriter().append("Served at: ").append(request.getContextPath());  String userinput = request.getParameter("userinput");  System.out.println("客户端连接!");  System.out.println("请求信息为:" + userinput);  PrintWriter out = response.getWriter();  if(userinput.equals("") || userinput.length()<6) {   response.setContentType("text/html;charset=UTF-8");   response.setCharacterEncoding("UTF-8");   response.setHeader("Content-Type", "text/html;charset=utf-8");   out.write("<h3>the length of input string must be more than 6!</h3>");  }else{   response.setContentType("text/html;charset=UTF-8");   response.setCharacterEncoding("UTF-8");   response.setHeader("Content-Type", "text/html;charset=utf-8");   out.println("<h3>Correct!</h3>");  }  out.close(); } /**  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse  *  response)  */ protected void doPost(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  // TODO Auto-generated method stub  doGet(request, response); }}

 web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>Test</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>AjaxServlet</servlet-name> <servlet-class>one.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServlet</servlet-name> <url-pattern>/servlet/AjaxServlet</url-pattern> </servlet-mapping></web-app>

ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax测试</title></head><body><div> <h2>AJAX Test</h2> <input type="text" name="userinput" placeholder="用户输入,Ajax方式获得数据" onblur="getResult(this)"> <br> <span id="ajax_result"></span> <script> getResult = function(str){  var httpxml;  if(0 == str.value.length) {   document.getElementById("ajax_result").innerHTML = "Nothing";   }   if (window.XMLHttpRequest) {   xmlhttp = new XMLHttpRequest();  }else{   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  }  xmlhttp.onreadystatechange = function(){   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;   }  }  xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);  xmlhttp.send();  } </script></div></body></html>

实验结果
 •长度小于6时:

 •长度大于等于6:

使用JSP方式

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%   //接收参数   String userinput = request.getParameter("userinput");   //控制台输出表单数据看看   System.out.println("userinput =" + userinput);   //检查code的合法性   if (userinput == null || userinput.trim().length() == 0) {     out.println("code can't be null or empty");   } else if (userinput != null && userinput.equals("admin")) {     out.println("code can't be admin");   } else {     out.println("OK");  } %>

ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax测试</title></head><body><div> <h2>AJAX Test</h2> <input type="text" name="userinput" placeholder="用户输入,Ajax方式获得数据" onblur="getResult(this)"> <br> <span id="ajax_result"></span> <script> getResult = function(str){  var httpxml;  if(0 == str.value.length) {   document.getElementById("ajax_result").innerHTML = "Nothing";   }   if (window.XMLHttpRequest) {   xmlhttp = new XMLHttpRequest();  }else{   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  }  xmlhttp.onreadystatechange = function(){   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;   }  }  //xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);  xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true);  xmlhttp.send();  } </script></div></body></html>

效果一致。

JQuery 中的Ajax

前面介绍的是原生的Ajax实现方式,我们需要做的工作还是很多的,而JQuery帮助我们完成了平台无关性的工作,我们只需要专注于业务逻辑的开发即可。直接用jquery的.post或者.get或者.ajax方法,更方便更简单,js代码如下:
 •.POST方式

 $.post("./newProject",{newProjectName:project_name},   function(data,status){  //alert("data:" + data + "status:" + status);  if(status == "success"){   var nodes = data.getElementsByTagName("project");   //alert(nodes[0].getAttribute("name"));   for(var i = 0;i < nodes.length;i ++){    $("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>");    }  } })

 •.ajax方式

 $(function(){  //按钮单击时执行  $("#testAjax").click(function(){    //Ajax调用处理   $.ajax({    type: "POST",    url: "test.php",    data: "name=garfield&age=18",    success: function(data){      $("#myDiv").html('<h2>'+data+'</h2>');     }   });   }); });

 •.get方式

 $(document).ready(function(){ $("#bt").click(function(){ $.get("mytest/demo/antzone.txt",function(data,status){  alert("Data:"+data+"\nStatus:"+status); }) })})

总结

今天的演示对于实际开发的过程中,服务器端的用户输入数据验证,或者即时更新页面而又减少网络流量是非常的有必要的。而且用处也很广泛,还能有效的提升用户体验。

这次的案例,就当是抛砖引玉,给你的应用也添加上异步加载吧。


  • 上一条:
    ajax同步验证单号是否存在的方法
    下一条:
    Ajax技术组成与核心原理分析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客