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

请关注“知了堂学习社区”，地址：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操作