一.介绍

二.Ajax 的使用

1.XMLHttpRequest 对象

2.Ajax 的使用步骤

三.Ajax 的运行原理

一.介绍

主要内容

Ajax 简介

Ajax 的使用

JSON 详解

Jquery 的 Ajax 使用

Ajax 实战案例

学习目标

Ajax 简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

二.Ajax 的使用

1.XMLHttpRequest 对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它

web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或

其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成

为 Ajax 编程的核心对象。

2.Ajax 的使用步骤

(1)创建 XMLHttpRequest 对象

(2)给定请求方式以及请求地址

(3)发送请求

(4)获取服务器端给客户端的响应数据

创建项目，注意项目名称要和保存路径最后一个文件名一致，创建时选择Web Application

创建完成后，导入一个jar包，即servlet-api.jar，因为javax包不是javaSE提供的，而是javaEE的包，即servlet是服务器Tomcat实现的标准，所以要导入相关jar包。

如下图点击项目结构

再选择Libraries--》加号--》Java--》选择tomcat按装目录下的lib--》servlet-api.jar，选择并确定。

再去项目结构下点击Artifacts，检查是否已经添加

红框处如果ajaxDemo文件下有这个jar包，则右键这个jar包，选择Put into /WEB-INF/lib，这样就真正将这个jar包安装进来。

在idea中配置Tomcat，参考这篇文章的第七节

将web项目部署到Tomcat的webapps中，参考这篇文章的第九节

第一个示例：

servlet不懂的可以去看我的servlet系列的文章，戳这里

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0"><servlet><servlet-name>HelloWorld</servlet-name><servlet-class>com.ajax.servlet.AjaxServlet</servlet-class></servlet><servlet-mapping><servlet-name>HelloWorld</servlet-name><url-pattern>/helloworld.do</url-pattern></servlet-mapping>
</web-app>

AjaxServlet.java:

package com.ajax.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {PrintWriter pw=resp.getWriter();pw.println("Hello Ajax");pw.flush();pw.close();}
}

index.jsp：

<%--Created by IntelliJ IDEA.User: ASUSDate: 2022/4/27Time: 15:55To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>$Title$</title><script>function btn() {//创建 XMLHttpRequest 对象var xhr=new XMLHttpRequest();//请求一个servlet，这个servlet的url是ajax.doxhr.open("get","ajax.do");//发送异步请求xhr.send();//获取服务器端给客户端的响应数据//当send函数执行之后，下面的函数立即执行xhr.onreadystatechange=function () {//0:open()没有被调用// 1:open()正在被调用// 2:send()正在被调用// 3:服务端正在返回结果// 4:请求结束，并且服务端已经结束发送数据到客户端//响应成功if(xhr.readyState==4 && xhr.status == 200){//输出服务端返回的内容alert(xhr.responseText);//将返回内容放到span标签中document.getElementById("span").innerHTML=xhr.responseText;}}}</script></head><body><h3>我怎么这么菜</h3><hr/><span id="span">点击按钮改变</span><input type="button" value="ok" onclick="btn()"/></body>
</html>

运行tomcat,输出如下：

三.Ajax 的运行原理

触发事件函数先去创建xhr对象，调用对象的send方法发送异步请求，服务器处理异步请求，给客户端产生响应（千万不能用请求转发或重定向来产生响应，而是应该拿到一个字符输出流将i响应推回给xhr对象），而xhr是不知道如何处理的返回的数据的，通过onreadystatechange属性绑定的回调函数执行功能操作。函数中通过更新dom元素来更新我们的页面。

Ajax技术详解（一）相关推荐

【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
请求对象触碰jQuery：AJAX异步详解
最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下. 传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous Java ...
【H.264/AVC视频编解码技术详解】十九：熵编码算法(5)——H.264的CABAC（上）：语法元素的二值化方法...
<H.264/AVC视频编解码技术详解>视频教程已经在"CSDN学院"上线,视频中详述了H.264的背景.标准协议和实现,并通过一个实战工程的形式对H.264的标准进行 ...
Linux磁盘阵列技术详解（二）--raid 1创建
我在Linux磁盘阵列技术详解(一)里已经详细介绍了几种RAID磁盘阵列方式,原理以及创建raid 0 的详细步骤.那么这篇文档就着重讲解如何创建raid 1的技术: 步骤如下: ① 分区同样我们还 ...
《Hadoop技术详解》一导读
前言 Hadoop技术详解本书采用的约定本书采用以下排版约定. 斜体用于表明新的术语.URL.电子邮件地址.文件名和文件扩展名. 等宽字体用于程序清单,正文段落中有关的程序元素,如变量及函数 ...
科普：5G网络关键技术详解
不久前,中国华为公司主推的Polar Code(极化码)方案,成为5G控制信道eMBB场景编码方案.消息一出,在网络上就炸开了锅,甚至有媒体用"华为碾压高通,拿下5G时代"来形容这 ...
zookeeper 分布式过程协同技术详解.pdf_阿里大牛耗时18个月整理这份ZooKeeper分布式详解文档...
前言摩尔定律揭示了集成电路每18个月计算性能就会增加一倍.随着信息的飞速膨胀,很多应用都无法依赖单个服务器的性能升级来处理如此庞大的数据量,分布式系统和应用越来越受到人们的青睐.分布式系统和应用不仅 ...
Qtum量子链研究院：Plasma技术详解（下篇）
Plasma的设计模型有两个主要的分支:Plasma MVP(Minimal Viable Plasma,最小可行的Plasma)和Plasma Cash.Plasma MVP的目标是为最基本的可用的 ...
Python数据科学-技术详解与商业实践视频教程
Python数据科学-技术详解与商业实践(八大案例) 网盘地址:https://pan.baidu.com/s/13QrR_5Er6LgWCWzSb7qOrQ 提取码:s7vw 备用地址(腾讯微云): ...

Ajax技术详解（一）

一.介绍

二.Ajax 的使用

1.XMLHttpRequest 对象

2.Ajax 的使用步骤

三.Ajax 的运行原理

Ajax技术详解（一）相关推荐

最新文章

热门文章