【知了堂学习笔记】_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 = falsefunction 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操作
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值