概述AJAX

最新推荐文章于 2024-10-26 17:16:47 发布

勒城

最新推荐文章于 2024-10-26 17:16:47 发布

阅读量211

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.youkuaiyun.com/Lecheng_/article/details/116309198

版权

笔记专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了AJAX技术，包括其组成、编程模型和实现方式，探讨了XML作为数据传输格式的问题，引出了JSON并解析其语法格式。对比了JSON与XML的优缺点，并介绍了Fastjson框架，阐述其特性与使用方法，强调其在Java对象与JSON转换中的高效性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述AJAX

Ajax即Asynchronous Javascript And XML异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

Ajax技术的组成

运用XHTML+CSS来数据显示
运用JavaScript操作DOM（Document Object Model）来执行页面的部分更新及动态效果
运用XML和XSLT进行数据交互
无效良构有效
运用XMLHttpRequest【浏览器上的组件】与网页服务器进行异步资料交换

最后使用JavaScript绑定一切
###同步和异步
同步会导致客户端的不连续体验，这对客户端不够友好，使用Ajax就是将同步造成的不连续客户体验转换为连续的客户体验

异步可以达到

减轻服务器的压力，AJAX采用的是按需取数的原则，以最大程序的减少冗余请求和影响对服务器造成的负担
无刷新页面可以减少用户等待事件，缓解客户等待心里，以带来更友好的用户体验
进一步促进页面呈现和数据的分离

Ajax编程模型

AJAX中应用核心技术有JavaScript、XMLHttpRequest对象、DOM和XML/json

微软XMLHttpRequest是XMLHTTP组件的对象，通过这个对象只同服务器进行数据层面的交换，而不用每次都刷新界面
JavaScript一直定位为客户端的脚本语言，应用最多的是表单数据的校验，使用AJAX后可以通过JavaScript操作XMLHttpRequest来和数据库交互
DOM是提供给html和xml使用的一组API，提供了文件的表述结果，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以和页面进行交互
XML可以规范的定义结构化数据，曾经是数据传输和文档符合统一的标准，使用XML表述的数据和文档可以使用所有应用共享

AJAX编程实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>Title</title>
            <script>
                var xhr=null;
                function fff(){
                let nameErr=document.getElementById("nameErr");
                nameErr.innerHTML="";
            }
                function ff(){  //要求页面种必须有一个用户事件触发初始化函数的执行
                //获取用户在<input name="name">中输入的数据
                let pname=document.getElementById("pname").value;
                createXHR();   //按照不同的浏览器创建Ajax引擎XMLHttpRequest对象
                if(xhr){
                xhr.open('GET','product.do?action=exists&name='+pname,true)//打开连接
                xhr.onreadystatechange=callback;//注册回调事件处理函数，用于处理readyState变更
                xhr.send();  //发送请求
            }else{
                alert('您的浏览器不支持异步操作!');
            }
            }
                function callback(){  //定义回调事件处理函数
                let nameErr=document.getElementById("nameErr");
                //readyState有0-4共5种准备状态值，当变化后则触发这个函数执行

                if(4==xhr.readyState){  //判断准备状态值是否为4,4表示下载响应完毕
                if(200==xhr.status){  //判断http的响应状态值，如果200表示正常响应，如果404表示请求地址错误
                //接收服务器端的响应内容，一般采用XML或者JSON格式
                let res=xhr.responseText;//将服务器响应信息当做普通文件进行处理，如果使用responseXML表示当做xml文档进行处理
                //使用DOM进行页面的部分动态刷新
                nameErr.innerHTML=res;
            }else{
                nameErr.innerHTML='请求地址错误！'
            }
            }else{
                nameErr.innerText='数据正在加载中...'
            }
            }
                function createXHR(){
                if(window.ActiveXObject)
                xhr=new ActiveXObject("Microsoft.XMLHttp");
                else if(window.XMLHttpRequest)
                xhr=new XMLHttpRequest();
            }
            </script>
    </head>
    <body>
        <form action="product.do" method="post">
            <input type="hidden" name="action" value="add">
                <table>
                    <tr><td>产品名称：</td><td><input required id="pname" onfocus="fff()" name="name" onblur="ff()"><span class="error" id="nameErr"></span> </td></tr>
                    <tr><td>产品价格：</td><td><input type="number" name="price"></td></tr>
                    <tr><td>所属类目：</td><td><select>
                        <option value="">请选择产品所属的大类别</option>
                    </select></td></tr>
                    <tr><td>小类目：</td><td><select>
                        <option value="">请选择产品所属的小类别</option>
                    </select></td></tr>
                    <tr><td colspan="2">
                        <input type="submit" value="新增商品">
                            <input type="reset" value="重置数据">
                    </td> </tr>
                </table>
        </form>
    </body>
</html>

XML作为数据传输格式的问题

<input required id="pname1">
<div id="div1"></div>
<button onclick="dd()">问候</button>
<script>
    function dd() {
        let pname = document.getElementById("pname1").value;
        let obj1 = new AjaxObject();
        obj1.callback = function () {
            if (4 == obj1.xhr.readyState) {
                let div1 = document.getElementById("div1");
                let res = obj1.xhr.responseXML;
                div1.innerHTML=(res.getElementsByTagName("content")[0].firstChild.textContent);
            }
        }
        obj1.sendRequest("product.do", "POST", "action=test&name=" + pname);
    }
</script>

为了避免XML文件解析的麻烦，所以引入了JSON格式

JSON

JSON即JS对象表示法JavaScript Object Notation是一种轻量级的基于文本、独立于语言的数据交换格式。
它基于ECMAScript欧洲计算机协会制定的js规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示
数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和
生成，并有效地提升网络传输效率

JSON语法格式

[]数组

let arr=[1,2,3,4,5];

{}对象

let stu={"id":11,"name":"猴子","age":12};

值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个

例如对象数组:

var arr=[{"id":11,"name":"houzi","sex":false},{"id":12,"name":"小吕"},{"id":13,"name":"xinxin"}]

####JSON与JS对象的关系
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

    var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
 
    var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON 和 JS 对象互转
要实现从JSON字符串转换为JS对象，使用JSON.parse()方法

    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是{a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法

    var json = JSON.stringify({a:'Hello', b:'World'}); //结果是'{"a":"Hello","b":"World"}'

JSON和XML的比较

可读性。JSON和XML的可读性可谓不相上下，一边是简易的语法，一边是规范的标签形式，很难分出胜负

<?xml version="1.0" encoding="UTF-8"?>
<book>
    <id>111</id>
    <name>猴子历险记</name>
    <price>1.23</price>
</book>

{"id": 111,"name": "猴子历险记","price": 1.23}

可扩展性。XML天生有很好的扩展性，JSON当然也有，没有什么是XML可以扩展而JSON却不能扩展的。
不过JSON在Javascript主场作战，可以存储Javascript复合对象，有着xml不可比拟的优势

xml是一种可扩展标记语言，html是一种定标记语言
编码难度。XML有丰富的编码工具如Dom4j、Dom、SAX等，JSON也有提供的工具
解码难度。XML的解析方式有两种：1、通过文档模型解析，也就是通过父标签索引出一组标记。如
xmlData.getElementsByTagName(“tagName”)，但是这样是要在预先知道文档结构的情况下
使用，无法进行通用的封装。2、遍历节点（document 以及 childNodes）。这个可以通过递归
来实现，不过解析出来的数据仍旧是形式各异，往往也不能满足预先的要求
JSON和XML还有另外一个很大的区别在于有效数据率。JSON作为数据包格式传输的时候具有更高的
效率，这是因为JSON不像XML那样需要有严格的闭合标签，这就让有效数据量与总数据包比大大提
升，从而减少同等数据流量的情况下，网络的传输压力

fastjson框架

Fastjson是一个可以将 Java 对象与JSON字符串之间进行相互转换的库，它可以操作任何Java对象，
即使是一些预先存在的没有源码的对象。fastjson是目前java语言中最快的json库，比自称最快的
jackson速度还要快

解析JSON的几种方式比较

传统JSON方式JSONObject：复杂的JSON数据转换成实体类存在缺陷，性能和功能不够完善
Jackson方式：复杂的JSON数据转换成实体类存在缺陷，性能和功能优于传统方式
Gson方式：功能是最优的，但是性能方面不如Jackson方式
FastJson方式：复杂的实体类转换成JSON数据存在缺陷，解析的速度最优

Fastjson 特性

提供服务器端、安卓客户端两种解析工具，性能表现较好
提供了 toJSONString() 和 parseObject() 方法来将 Java 对象与 JSON 相互转换。调用toJSONString方法即可
将对象转换成 JSON 字符串，parseObject 方法则反过来将 JSON 字符串转换成对象。
允许转换预先存在的无法修改的对象（只有class、无源代码）。
Java泛型的广泛支持。
允许对象的自定义表示、允许自定义序列化类。
支持任意复杂对象（具有深厚的继承层次和广泛使用的泛型类型）。

Fastjson的使用
添加依赖

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.76</version>
    </dependency>

将 Java 对象转换为 JSON 格式

    public class Person {
         
        @JSONField(serialize=false)
        private String password;
     
        @JSONField(name = "FULL NAME")
        private String fullName;
     
        @JSONField(format="dd/MM/yyyy")
        private Date dateOfBirth;

使用 JSON.toJSONString() 将 Java 对象转换换为 JSON 对象

List<Person> listOfPersons = new ArrayList<Person>();
istOfPersons.add(new Person(15, "John Doe", new Date()));
String jsonOutput= JSON.toJSONString(listOfPersons);

使用ordinal参数指定字段的顺序
format参数用于格式化date属性
默认情况下，FastJson库可以序列化Java bean实体，但可以使用serialize指定字段不序列化

JSON 字符串转换为 Java 对象

Person person = new Person(20, "John", new Date());
String jsonObject = JSON.toJSONString(person);
Person newPerson = JSON.parseObject(jsonObject, Person.class);

@JSONField