【知了堂学习笔记】_Ajax基础知识

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #xml #异步

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Ajax的基本原理及其在异步交互中的应用，并详细讲解了JSON数据格式的特点与解析方法。

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.Ajax作用

ajax是什么
- 传统web应用采用同步交互方式实现数据呈现，当服务器处理请求时，客户端必须要等待
- ajax建立起了浏览器客户端与服务器之间的桥梁，可以消除网络交互过程中对的处理-等待-处理的缺陷
- ajax全称：Asynchronous JavaScript and XML 异步JavaScript和XML
Ajax异步交互
- 浏览器发送请求到达服务器端
- 服务器端通过后台业务框架进行数据处理
- 服务器处理好的数据会转成XML，JSON,Text,同时将数据发送到客户端
- 客户端通过XMLHttpRequest核心对象对数据进行解析
- 最后将解析好的数据通过HTML，css等技术进行装饰
XML
- XML就是一个数据结构，数据模型，且是有关联的数据模型
- WebService应用，就是以XML数据进行数据之间的传递和交互

2.XMLHTTPRequest 对象
- XMLHttpRequest 创建

var xmlHttpReq = false；
function createXmlHttpRequest(){
    if(windown.XMLHttpRequest){
        xmlHttpReq = new XMLHttpRequest();
}else if(windown.ActiveXObject){
        try{
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
            console.log("===fail=====");
    }
}

XMLHttpRequest的属性和方法
- 响应属性
  - responseXML:接收服务器响应XMl格式数据
  - ReponseText：接收服务器响应文本字符串数据
- 状态属性
  - readyState：监控服务器响应变化状态。状态变化是有数字0~4构成
  - status：监听Http Status 状态码
    - 200，服务器没有问题，数据也是完好返回
    - 500，服务器后台代码有问题
    - 404，找不到访问的资源
- 事件属性
  - onreadystatechange：创建回调函数，然后接收服务器返回的状态与数据
XMLHttpReqeust open（）方法
- open(method,url,async):打开一个ajax请求
- method：POST和GET
- url：远程服务器的地址
- async：设置ajax请求方式是同步（false）还是异步（true）
XMLHttpReqeust send（）方法
- send（String）：发送数据，要求必须POST方法
XMLHttpReqeust 添加协议头
- setRequestHeader（Header，Value）添加协议头信息

3.XML/JSON解析

解析txt
- 当服务器端返回数据为字符串时，ajax数据格式就是TXT
- 在浏览器端通过ResponseText来获得字符串形式的响应数据
解析XML
- 当服务器端返回数据为XML时，ajax数据格式就是XML
- 在浏览器端通过ResponseXML来获得字符串形式的响应数据
解析JSON
- 什么是JSON
  - JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，易于阅读和编写
  - JSON采用完全独立于语言的文本格式，也使用了类似于C语言家族的习惯（包括c,c++,c#,java,JavaScript,Perl,Python等）。这些特性是JSON成为理想的数据交换格式
  - JSON比XMl更小更快更易解析，服务器端生成JSON数据更加的简单。
- JSON的数据结构
  - “名称/值”对的集合，它被理解为对象（object）
    var o = {“nis”:”snid”,”ssd”:”sdad”}
  - 值得有序列表，在大部分语言中，被称为数组
    var arr = [{“nis”:”snid”,”ssd”:”sdad”},{“nis”:”snid”,”ssd”:”sdad”}]
- JSON数据解析
  - 在数据传输流程中，json是以文本，即字符串的形式传递的，而js操作的是JSON对象，所以JSON对象和JSON字符串之间的相互转换是关键
  - JSON字符串:var str1 = ’ {“nis”:”snid”,”ssd”:”sdad”}’；
  - JSON对象：var str2 = {“nis”:”snid”,”ssd”:”sdad”}；
  - JSON字符串转JSON对象
    - eval函数完成JSON字符串转JSON对象，原生JS语法
    - 使用JSON提供的json.js包，将其放入网页中 parse
    - 使用jQuery完成格式的转化 parseJSON
  - JSON对象转JSON字符串
    - 使用json2.js中stringify（）完成
  - JSON反序列化
    JSON反序列化：服务器端得到一个JSON字符串，然后将JSON字符串转换成JavaBean对象
    - 全局角度考虑（MVC开发流程），客户提交一个数据，控制层的得到数据，如果数据直接转换JavaBean对象，在业务层和数据访问层在操作上会变得简单
    - 到了框架的阶段，则直接javabean来完成insert操作