Ajax

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量338 收藏
点赞数
分类专栏： Ajax 文章标签： javascript ajax xml 异步 用户体验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adsl624153/article/details/72777593
版权

1、概念

Ajax，Asynchronous JavaScript And Xml。异步的JavaScript和XML
JavaScript负责发送请求，XML作为一种响应的数据

Ajax主要用来增强用户体验。因为它是浏览器与服务器之间进行异步交互，而无需刷新页面的技术
它只会局部更新页面，而不用刷新整个窗口

2、异步和同步

⑴ 同步请求
当向服务器发请求时，必须得到响应成功后，才能发送其他的请求，有一个等待的过程，而且响应成功后会刷新整个页面

⑵ 异步请求
当向服务器发请求时，不用等响应成功，就可以发送其他请求，不需要等待，而且响应成功后局部刷新页面

3、发送Ajax请求

步骤

⑴ 创建XMLHttpRequest对象
    Ajax的所有操作，都由该对象完成

⑵ 设置请求信息
⑶ 发送请求
⑷ 接收响应

相关函数和属性

XMLHttpRequest

new XMLHttpRequest();
创建XMLHttpRequest对象

open

open(method, url, async, username, password);
设置请求参数

method:请求方式。可选值有GET和POST，不区分大小写
url:请求地址
async:设置当前请求是否异步【true】；同步【false】。默认是true
username:用户名
password:密码

当发送的请求需要权限时，使用username和password

send

send(body);
发送请求
send方法中传入一个Object类型的请求体。GET请求没有请求体，可以不传

如果是POST请求，则可以在里面写入请求参数字符串，格式：
    键1=值1&键2=值2

setRequestHeader

setRequestHeader(header, value);
设置请求头信息
一般用于：
当发送POST请求时，需要设置一个请求头对请求体中的请求参数进行URL编码

 setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

注意：
    ⑴ 这是固定写法， 不能修改，否则无效
    ⑵ 当发送POST请求时，如果不添加该语句，则服务器将无法获取请求参数（null）
    ⑶ 该语句需要写在open函数的下面，send函数的上面
    ⑷ GET请求的参数是写在URL地址中的，故该方法对GET请求的参数无效

这个参数就是form表单中的enctype属性

<form enctype="application/x-www-form-urlencoded" ></form>

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码
    application/x-www-form-urlencoded
    在发送前编码所有字符（默认）

responseText

XMLHttpRequest的属性
接收响应的文本内容

注意：不是说已发送请求，就可以接收响应。这期间有一个等待的过程。需要给XMLHttpRequest的onreadystatechange，设置一个事件，来监听是否响应已经就绪

onreadystatechange

onreadystatechange
每当 readyState 改变时，就会触发 onreadystatechange 事件

readyState

XMLHttpRequest的属性
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

XMLHttpRequest的属性

200: "OK"
404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

responseXML

XMLHttpRequest的属性
接收响应的XML数据

同responseText一样，接收数据时，有一个等待的过程

注意：Servlet发送XML的响应时，需要提前声明响应的类型：

response.setContentType("text/xml;charset=UTF-8");

否则xmlhttp.responseXML无法获取响应的内容（null）

获取XML数据中的子元素的文本内容

⑴ 接收响应的XML数据
    var docEle = xmlhttp.responseXML;

⑵ 获取子元素标签
    var childEle = docEle.getElementsByTagName(“子元素标签名”)[下标];

⑶ 获取子元素标签的第一个子节点（文本节点）
    var textNode = childEle.firstChild;

⑷ 获取文本节点的文本内容
    var text = textNode.nodeValue;

GET请求示例

【JavaScript代码】

<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            //设置请求信息
            xhr.open("GET", "${pageContext.request.contextPath}/ajaxServlet");

            // 发送请求【GET请求没有请求体】
            xhr.send();

            // 给XMLHttpRequest对象，绑定state改变的函数
            xhr.onreadystatechange = function(){
                // var readyState = xhr.readyState;
                // var statusNum = xhr.status;
                // console.log(readyState + " : " + statusNum);

                // 当请求已完成，且响应已就绪【readyState等于4】
                // 当响应状态码为200时
                if (4 == xhr.readyState && 200 == xhr.status) {
                    // 获取请求内容
                    var text = xhr.responseText;
                    var h1 = document.getElementById("h1");
                    h1.innerHTML = text;
                }
            };

        };
    };
</script>

【body内容】

<input id="btn" type="button" value="通过按钮发送GET请求" />
<h1 id="h1"></h1>

【AjaxServlet】

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=UTF-8");
    resp.getWriter().println("响应内容");
}

POST请求示例

【JavaScript代码】

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");
            // 对POST的请求参数进行URL编码
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 发送请求参数
            xmlhttp.send("name=张三&password=1234");
            xmlhttp.onreadystatechange = function(){
                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
                    var text = xmlhttp.responseText;
                    alert(text);
                }
            };
        };
    };
</script>

【body内容】

<button id="btn">发送POST请求</button>

【AjaxServlet】

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    // 设置解析请求参数的编码格式
    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String password = request.getParameter("password");
    System.out.println("name: " + name + ", password: " + password);

    // 设置响应编码
    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("响应POST请求");
}

示例响应数据是XML

【JavaScript代码】

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet");
            xmlhttp.send();
            xmlhttp.onreadystatechange = function(){
                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
                    // 接收响应的XML数据
                    var DocEle = xmlhttp.responseXML;
                    // 获取第一个name子元素
                    var nameEle = DocEle.getElementsByTagName("name")[0];
                    // 获取name元素的第一个子节点
                    var nameNode = nameEle.firstChild;
                    // 获取节点值
                    var name = nameNode.nodeValue;
                    alert("name: " + name);
                }
            };
        };
    };
</script>

【body内容】

<button id="btn">获取XML响应</button>

【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    // 设置响应体类型为XML
    response.setContentType("text/xml;charset=UTF-8");
    String xml =
    "<person>" +
        "<name>张三</name>" +
        "<age>14</age>" +
    "</person>";
    response.getWriter().write(xml);
}

4、兼容IE5和IE6

问题

由于IE5和IE6不认识XMLHttpRequest，所以IE5和IE6无法使用XMLHttpRequest

IE5找不到XMLHttpRequest

这时就需要使用ActiveX 对象

 new ActiveXObject("Microsoft.XMLHTTP");

通过这种方式得到的对象，就可以使用Ajax了

封装一个函数，用来创建对象

function createXMLHttp() {
    var xmlhttp;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        // 出错了，就创建ActiveXObject对象
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            alert("您的浏览器不支持Ajax！");
        }
    }

    return xmlhttp;
};

再创建对象的时候，就调用函数即可：

var xmlhttp = createXMLHttp();

5、JSON

概念

JavaScript Object Notation，JavaScript的对象表示法。是一种轻量级的数据交换格式
它是一种可以跨平台，跨语言的数据交换格式
由于XML格式的数据，解析复杂、性能差，所以现在基本已被JSON所代替

对比：
【XML格式数据】

 <person>
   <name>张三</name>
   <age>14</age>
 </person>

【JSON格式数据】

 {"name":"张三", "age":14}

JSON格式

JSON对象

{“属性名1”:”属性值1”, “属性名2”:”属性值2”, …}

注意事项：
⑴ 属性名必须使用双引号（”“）引起来
⑵ 属性名和属性值之间用冒号（:）分割
⑶ 多个属性之间，用逗号（,）分割

JSON数组

[属性值1, 属性值2, 属性值3, …]

多个属性值之间用逗号（,）分割

JSON属性可以使用的类型

 字符串
 数字
 布尔类型
 null
 对象
 数组

在JavaScript中JSON对象与JSON字符串互转

JSON字符串转JSON对象

JSON.parse(JSON字符串);

得到一个Object类型的JSON对象

JSON对象转JSON字符串

JSON.stringify(JSON对象);

得到一个JSON字符串

使用示例

// 创建JSON字符串
var jsonStr = '{"name":"张三", "age":14}';
// 创建JSON对象
var jsonObj = {
    "name":"李四",
    "age":12
};

// 将JSON字符串转换为JSON对象
var Object = JSON.parse(jsonStr);
// 获取name属性值
alert(Object.name);

// 将JSON对象转换为JSON字符串
var str = JSON.stringify(jsonObj);
alert(typeof str);
alert(str);

在Java中JSON对象与JSON字符串互转

方法

需要调用Gson类里的方法，导入gson-2.2.4.jar包

new Gson();

创建一个Gson对象

public String toJson(Object src) {}

将Object对象转换为JSON字符串

public <T> T fromJson(String json, Class<T> classOfT) throws JsonSyntaxException {}

将JSON字符串转换为Object类型的对象

使用示例

【Person（JavaBean）】

String类型的name和age，提供有参构造，重写toString方法

【JavaScript代码】

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet");
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 创建JSON字符串
            var jsonStr = '{"name":"张三", "age":14}';
            // 发送请求
            xmlhttp.send("jsonStr=" + jsonStr);
            xmlhttp.onreadystatechange = function(){
                if (4 == xmlhttp.readyState && 200 == xmlhttp.status) {
                    var respJSONStr = xmlhttp.responseText;
                    alert(respJSONStr);
                    // 将获取到的JSON字符串转换为JSON对象
                    var jsonObj = JSON.parse(respJSONStr);
                    alert(jsonObj.name);
                }
            };
        };
    };
</script>

【body内容】

<button id="btn">发送JSON对象，获取JSON字符串</button>

【AjaxServlet】

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    // 设置请求字符集编码
    request.setCharacterEncoding("UTF-8");
    // 设置相应字符类型
    response.setContentType("text/html;charset=UTF-8");

    // 获取请求参数【JSON字符串】
    String jsonStr = request.getParameter("jsonStr");
    // 创建Gson对象
    Gson gson = new Gson();
    // 转换为Object
    Object obj = gson.fromJson(jsonStr, Person.class);
    System.out.println(obj);

    // 创建一个Person对象
    Person person = new Person("李四", "12");
    // 将对象转换为JSON字符串
    String respJSONStr = gson.toJson(person);
    response.getWriter().write(respJSONStr);
}

测试将Map集合转换为JSON字符串

    Map<String, Person> map = new HashMap<String, Person>();
    map.put("p1", new Person(1, "张三", 14));
    map.put("p2", new Person(2, "李四", 17));
    map.put("p3", new Person(3, "王五", 12));

    Gson gson = new Gson();

    /*
     * {
     *      "p1":{
     *          "id":1,
     *          "name":"张三",
     *          "age":14
     *      },
     *      "p2":{
     *          "id":2,
     *          "name":"李四",
     *          "age":17
     *      },
     *      "p3":{
     *          "id":3,
     *          "name":"王五",
     *          "age":12
     *      }
     * }
     */
    String jsonStr = gson.toJson(map);
    System.out.println(jsonStr);

    /*
     * {
     *      p1={
     *          id=1.0,
     *          name=张三,
     *          age=14.0
     *      },
     *      p2={
     *          id=2.0,
     *          name=李四,
     *          age=17.0
     *      },
     *      p3={
     *          id=3.0,
     *          name=王五,
     *          age=12.0
     *      }
     * }
     */
    Object obj = gson.fromJson(jsonStr, Map.class);
    System.out.println(obj);

6、使用jQuery发送Ajax请求

发送GET请求

 $.get(url, [data], [callback], [type]);

url:待载入页面的URL地址
data:待发送 Key/value 参数。一个Object类型的对象
callback:载入成功时回调函数
type:返回内容格式，xml, html, script, json, text, _default

发送POST请求

 $.post(url, [data], [callback], [type]);

其参数和get函数里的参数一样

默认获取的响应类型为JSON

  $.getJSON(url, [data], [callback]);

其参数和get函数里的前三个参数一样

Tips：该函数等同于

$.get(url, [data], [callback], "json");

即最后一个参数【获取到的响应的格式】指定为了json

注意：
    ⑴ 该函数需要调用Servlet中的doGet方法来处理请求
    ⑵ 响应参数是JSON字符串，其会被自动转换为JSON对象[object Object]

测试GET和POST请求

【jQuery代码】

<script type="text/javascript">
    $(function(){
        $("#getBtn").click(function(){
            // 请求地址
            var url = "${pageContext.request.contextPath}/ajaxServlet";
            // 请求参数
            var data = {
                "name":"张三",
                "age":14
            };
            // 响应成功的回调函数
            var fun = function(data){
                alert(data);
            };
            // 响应类型
            var type = "text";
            $.get(url, data, fun, type);
        });

        $("#postBtn").click(function(){
            var url = "${pageContext.request.contextPath}/ajaxServlet";
            $.post(url, function(data){
                alert(data);
            }, "text");         
        });
    });
</script>

【body内容】

<input id="getBtn" type="button" value="发送GET请求" /><br /><br />
<input id="postBtn" type="button" value="发送POST请求" />

【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String name = request.getParameter("name");
    String age = request.getParameter("age");
    System.out.println("name: " + name + ", age: " + age);

    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("响应GET请求");
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("响应POST请求");
}

测试接收JSON响应

【Person（JavaBean）】

String类型的name和age，提供有参构造

【jQuery代码】

<script type="text/javascript">
    $(function(){
        $("#getJSONBtn").click(function(){
            var url = "${pageContext.request.contextPath}/ajaxServlet";
            $.getJSON(url, function(data){
                alert(data);
                alert(data.name);
            });
        });

        $("#getBtn").click(function(){
            var url = "${pageContext.request.contextPath}/ajaxServlet";
            $.get(url, function(data){
                alert(data);
                alert(data.name);
            }, "json");
        });
    });
</script>

【body内容】

<input id="getJSONBtn" type="button" value="通过getJSON函数获取JSON字符串响应" /><br /><br />
<input id="getBtn" type="button" value="通过get函数获取JSON字符串响应" />

【AjaxServlet】

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    Person person = new Person("张三", "14");
    Gson gson = new Gson();
    String jsonStr = gson.toJson(person);

    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write(jsonStr);
}
loetca
关注
专栏目录
Ajax 之 XMLHttp初步
weixin_34159110的博客
07-24 88
前一段做项目的时候，要用到异步加载数据的知识。以前没写过这方面的，查了查，可以使用Ajax来完成。有很多现成额Ajax框架，但是总感觉用这些东西之前至少得先把原理弄清楚吧。在者，用那些别人的控件的时候，出个问题调bug就是个令人纠结头疼的事，就是因为自己根本不明白底层到底是怎么回事。。。。 好吧，然后就开始最基础的XMlHttp对象的学习。 这里，暂时抛开令人郁闷的浏览器...
Ajax对xml信息的接收和处理
Yeoman92的博客
11-12 569
Ajax负责请求和接收xml信息，DOM负责处理xml信息。DOM： 　　php中，DOM是php 与 xml（html）之间沟通的桥梁 　　JavaScript中，DOM是JavaScript 与 html（xml）之间沟通的桥梁 　　xml需要从服务器端返回到客户端被JavaScript处理 　　Ajax负责请求xml，DOM（JavaScript）负责处理xml信息 　　Ajax+Ja
前后端分离笔记（动态的请求都通过ajax进行）
qq_19768163的专栏
06-28 2316
1 什么是前后端分离 这里的前后端分离， 定义为网页的动态内容都通过ajax等异步的方式进行。 关于前后端分离常见的另一种含义：前端完全负责view层和controller层。 见另一篇笔记：https://blog.csdn.net/qq_19768163/article/details/93998521 2 为什么要前后端分离 前端和后端职责分离 前端偏向于处理用户体验相关的方...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax高级程序设计pdf
05-16
**Ajax高级程序设计** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，提高了用户体验，尤其...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 354
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1210
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1073
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 222
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 181
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 262
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 622
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 767
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 165
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
AJAX技术入门讲解
"AJAX技术入门.ppt - 传智播客的AJAX教程，涵盖了AJAX的基本概念、思维方式、核心技术、应用实例、优缺点以及开发工具。" 在讲解AJAX技术之前，首先需要理解它的全称：Asynchronous JavaScript and XML（异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值