用jQuery实现Ajax

百科大全

更新时间：2025-10-05 16:47:2857

admin管理员组
文章数量:1794759

用jQuery实现Ajax

Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。

这里的异步是指，当程序执行到 Ajax 代码时，将 Ajax 代码交给另外一个线程来执行，不论执行结果如何，当前线程会继续向下执行。

提示：虽然 X 在 Ajax 中代表 XML，但是由于 JSON 的诸多优势（比如 JSON 属于 JavaScript 的一部分，而且更加轻量），目前 Ajax 中普遍使用 JSON 来传输数据。

名称由来

这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

AJAX不是JavaScript的规范，意思就是用JavaScript执行异步网络请求。是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。

包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

AJAX的发展 Web的运作原理

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

一次HTTP请求对应一个页面

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

iframe标签模仿实现Ajax效果

AJAX 可以用于创建快速动态的网页。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

编写一个 ajax-frame.html浏览器打开

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>kuangshen</title> </head> <body> <script type="text/javascript"> function LoadPage(){ var targetUrl = document.getElementById('url').value; console.log(targetUrl); document.getElementById("iframePosition").src = targetUrl; } </script> <div> <p>请输入要加载的地址：</p> <p> <input id="url" type="text" value="www.bilibili/"/> <input type="button" value="提交" onclick="LoadPage()"> </p> </div> <div> <h3>加载页面位置：</h3> <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe> </div> </body> </html>

AJAX的诞生微软发明

AJAX 最早起源于1997年，由微软发明了 AJAX 的关键技术并在1995年 IE5 推出之际开始支持 XmlHttpRequset 对象

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

但令人遗憾的是微软发明 AJAX 之后没有看到它的前景，以至于 Google 成为 AJAX 技术的最卓越的推动者和实践者，从而奠定 Google 在 AJAX 发展史上的领先地位。

Google Suggest

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布。最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

2005年 Google Map 发布，用户可以用鼠标拖动整个地图，而不是点击某个按钮。引起广泛重视。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样!

Ajax 技术

Ajax 不能独立工作。它被用来结合其他技术来创建交互式网页。

html

用于显示内容和样式，它主要用于演示。

CSS

允许我们从内容中清晰的分离显示样式，还可以通过 JavaScript 以编程的方式改变它。

JavaScript

松散类型的脚本语言。
页面中触发事件时调用某个 JavaScript 函数。
整个 Ajax 操作的胶带。

DOM

它用于动态显示和与数据交互。

访问和操作结构化文档的 API。
表示 XML 和 HTML 文档的结构。

XMLHttpRequest（核心）

Ajax的核心是XMLHttpRequest对象(XHR)。

XHR就是与服务器进行异步交互的 JavaScript 对象。

XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

提示：目前，所有的浏览器（Chrome、Firefox、IE7 及以上版本、Safari、Opera 等）都支持 XMLHttpRequest 对象。

AJAX工作原理

AJAX的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。

正如在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。

用户从UI发送请求，javascript调用转到XMLHttpRequest对象。
HTTP请求由XMLHttpRequest对象发送到服务器。
服务器使用JSP，PHP，Servlet，ASP等与数据库交互。
检索数据。
服务器将XML数据或JSON数据发送到XMLHttpRequest回调函数。
HTML和CSS数据显示在浏览器上。

因为 Ajax 请求是异步执行的，Ajax 请求发送之后，代码会继续向下执行，直至结束。

用jQuery实现Ajax

前置知识：ajax原理，json字符串进行信传递，Spring MVC 。

Ajax主要的功能是实现了浏览器端异步访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。
json是Ajax发送小部分数据的一种轻量级数据格式，可以简单易懂的给服务器或者浏览器交互数据，包括json对象，json数组对象。
Spring MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架，即使用了MVC架构模式的思想，将web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，框架的目的就是帮助我们简化开发，Spring Web MVC也是要简化我们日常Web开发的。

关于jQuery与 AJAX

jQuery是一个快速，简洁的JavaScript库，由John Resig创建于2006年。

jQuery的简化了HTML文档遍历，事件处理，动画和Ajax交互快速Web开发。

如果没有 jQuery，AJAX 编程还是有些难度的。

用JavaScript写AJAX并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

jQuery Ajax本质就是 XMLHttpRequest，在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。

能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

$.ajax() 是最底层的方法，常用的选项如下：

jQuery $.post()

通过远程 HTTP POST 请求载入信。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

有很多有关 Ajax 的方法，如 load()方法、$.getJSON() 方法、$.get() 方法、$.post() 方法。事实上，这几种方法从本质上来说都是使用 $.ajax() 方法来实现的。换句话来说，它们都是 $.ajax() 方法的简化版，它们能实现的功能，$.ajax() 都能实现，因为 $.ajax() 是最底层的方法。

编写第一个Ajax请求

新建一个module ：sspringmvc-06-ajax ，导入web支持

配置web.xml 和 springmvc的配置文件【记得静态资源过滤和注解驱动配置上】

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="xmlns.jcp/xml/ns/javaee" xmlns:xsi="www.w3/2001/XMLSchema-instance" xsi:schemaLocation="xmlns.jcp/xml/ns/javaee xmlns.jcp/xml/ns/javaee/web-app_4_0.xsd" version="4.0">  <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </init-param>  <load-on-startup>1</load-on-startup> </servlet>   <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <filter> <filter-name>encoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>  <filter> <filter-name>encodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app> <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="www.springframework/schema/beans" xmlns:xsi="www.w3/2001/XMLSchema-instance" xmlns:context="www.springframework/schema/context" xmlns:mvc="www.springframework/schema/mvc" xsi:schemaLocation="www.springframework/schema/beans www.springframework/schema/beans/spring-beans.xsd www.springframework/schema/context www.springframework/schema/context/spring-context.xsd www.springframework/schema/mvc www.springframework/schema/mvc/spring-mvc.xsd">  <context:component-scan base-package="com.kuang.controller"/> <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8"/> </bean> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="objectMapper"> <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"> <property name="failOnEmptyBeans" value="false"/> </bean> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>  <mvc:default-servlet-handler />   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">  <property name="prefix" value="/WEB-INF/jsp/" />  <property name="suffix" value=".jsp" /> </bean> </beans>

编写一个AjaxController

编写index.jsp测试

导入jquery ，可以使用在线的CDN ，也可以下载导入

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="code.jquery/jquery-3.1.1.min.js"></script> <%--<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js">--%> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/a1", data:{'name':$("#txtName").val()}, success:function (data,status) { alert(data); alert(status); } }); } </script> </head> <body> <%--onblur：失去焦点触发事件--%> 用户名:<input type="text" id="txtName" onblur="a1()"/> </body> </html>

启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！

Ajax的核心是XMLHttpRequest对象(xhr)

Ajax数据回显

获取一个集合对象，展示到前端页面

后台添加数据前端请求加展示test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <input type="button" id="btn" value="获取数据"/> <table width="80%" align="center"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> <tbody id="content"> </tbody> </table> <script src="code.jquery/jquery-3.1.1.min.js"></script> <script> $(function () { $("#btn").click(function () { $.post("${pageContext.request.contextPath}/a2",function (data) { console.log(data) var html=""; for (var i = 0; i <data.length ; i++) { html+= "<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].age + "</td>" + "<td>" + data[i].sex + "</td>" + "</tr>" } $("#content").html(html); }); }) }) </script> </body> </html>

中间经过JSON数据转换

注册提示效果

我们再测试一个小Demo，思考一下我们平时注册时候，输入框后面的实时提示怎么做到的；如何优化

我们写一个Controller 前端页面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax</title> <script src="code.jquery/jquery-3.1.1.min.js"></script> <script> function a1(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{'name':$("#name").val()}, success:function (data) { if (data.toString()=='OK'){ $("#userInfo").css("color","green"); }else { $("#userInfo").css("color","red"); } $("#userInfo").html(data); } }); } function a2(){ $.post({ url:"${pageContext.request.contextPath}/a3", data:{'pwd':$("#pwd").val()}, success:function (data) { if (data.toString()=='OK'){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }); } </script> </head> <body> <p> 用户名:<input type="text" id="name" onblur="a1()"/> <span id="userInfo"></span> </p> <p> 密码:<input type="text" id="pwd" onblur="a2()"/> <span id="pwdInfo"></span> </p> </body> </html>

【记得处理json乱码问题】

获取baidu接口（跨域）

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JSONP百度搜索</title> <style> #q{ width: 500px; height: 30px; border:1px solid #ddd; line-height: 30px; display: block; margin: 0 auto; padding: 0 10px; font-size: 14px; } #ul{ width: 520px; list-style: none; margin: 0 auto; padding: 0; border:1px solid #ddd; margin-top: -1px; display: none; } #ul li{ line-height: 30px; padding: 0 10px; } #ul li:hover{ background-color: #f60; color: #fff; } </style> <script> // 2.步骤二 // 定义demo函数 (分析接口、数据) function demo(data){ var Ul = document.getElementById('ul'); var html = ''; // 如果搜索数据存在把内容添加进去 if (data.s.length) { // 隐藏掉的ul显示出来 Ul.style.display = 'block'; // 搜索到的数据循环追加到li里 for(var i = 0;i<data.s.length;i++){ html += '<li>'+data.s[i]+'</li>'; } // 循环的li写入ul Ul.innerHTML = html; } } // 1.步骤一 window.onload = function(){ // 获取输入框和ul var Q = document.getElementById('q'); var Ul = document.getElementById('ul'); // 事件鼠标抬起时候 Q.onkeyup = function(){ // 如果输入框不等于空 if (this.value != '') { // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ // 创建标签 var script = document.createElement('script'); //给定要跨域的地址赋值给src //这里是要请求的跨域的地址我写的是百度搜索的跨域地址 script.src = 'sp0.baidu/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo'; // 将组合好的带src的script标签追加到body里 document.body.appendChild(script); } } } </script> </head> <body> <input type="text" id="q" /> <ul id="ul"> </ul> </body> </html>

本文标签： JQuery ajax

版权声明：本文标题：用jQuery实现Ajax 内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1687006387a127935.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。