zoukankan      html  css  js  c++  java
  • AJAX

    1.AJAX
    [1] AJAX简介
    > 全称: Asynchronous JavaScript And XML
    > 异步的JavaScript和XML

    > AJAX就是通过JavaScript向服务器发送请求,并接收响应,然后我们在通过DOM来修改页面。
    > XML指的是服务器响应的数据的格式。
    > 目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

    [2] 同步和异步
    > 同步:
    当我们通过浏览器向服务器发送一个请求时,浏览器会刷新整个页面。
    > 异步:
    当我们向服务器发送请求时,不是刷新整个网页,而是只刷新网页的一部分。

    [3] XMLHttpRequest对象
    > 我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
    > 在XMLHttpRequest对象中封装发送给服务器请求报文,同时在服务器发回响应时,响应信息也会在对象中封装。
    > 如何获取XMLHttpRequest对象
    - var xhr = new XMLHttpRequest();

    [4] 使用步骤
    1.创建XMLHttpRequest对象
    大部分比较新的浏览器都支持的方式(IE7以上)
    var xhr = new XMLHttpRequest();
    IE6以下的
    var xhr = new ActiveXObject("Msxml2.XMLHTTP");
    IE5.5以下的
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    通用的获取XMLHttpRequest对象的方法:

    //写一个获取XHR的方法
    function getXMLHttpRequest(){
    try{
    //大部分浏览器都支持的方式
    return new XMLHttpRequest();
    }catch(e){
    try{
    //IE6以下浏览器支持的方式
    return new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
    try{
    //IE5以下的浏览器
    return new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
    alert("你是火星来的吧!你的浏览器不支持AJAX!");
    }

    }

    }
    }

    2.设置请求信息(请求地址,请求方式,请求参数)
    xhr.open(请求方式,请求地址);
    在发送post请求时,还需要设置一个请求头,如下:
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    3.发送请求
    xhr.send(请求体);
    get请求没有请求体,所以send中可以传null或什么都不传。
    post请求需要通过send来设置请求参数。


    4.接收响应信息
    //xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用
    xhr.onreadystatechange = function(){
    //判断当前readyState是否为4 , 且响应状态码为200
    if(xhr.readyState==4 && xhr.status==200){
    //读取响应信息,做相关操作。

    //如果信息为纯文本
    xhr.responseText

    //如果信息为XML
    xhr.responseXML
    }
    };

    [5] 响应数据的格式
    - 响应一个XML
    - 当我们想通过servlet给ajax返回一个比较大量的信息,返回一个对象。
    - 返回 User :username:sunwukong age:18 gender:男
    username:sunwukgon,age:18,gender:男
    - 我们可以通过一个XML格式来返回一个大量的信息
    <user>
    <name></name>
    <age></age>
    <gender></gender>
    </user>

    - 响应一个JSON对象

    2.JSON
    [1] JSON简介
    > JSON全称 JavaScript Object Notation
    > 类似于JS中对象的创建的方法
    > JSON和XML一样,都是一种表示数据的格式
    > 但是JSON比XML的存储和解析性能要高的多,JSON要比XML高个30%左右。
    <user>
    <name>sunwukong</name>
    <age>18</age>
    <gender>男</gender>
    </user>

    {"name":"孙悟空","age":8,"gender":男}

    [2] JSON的格式
    > JSON字符串不方便阅读,但是传输性能好
    > XML方便阅读,但是传输性能差
    > JSON的格式和JS对象类型,但是要求属性名必须使用双引号。不能使用单引号,也不能不写引号!


    > JSON对象中实际就是一组一组的键值对的结构,
    键和值使用:连接,多个键值对之间使用,分开,注意如果是最后一组键值对,则千万不要在加,.
    > {
    "属性名1":属性值1,
    "属性名2":属性值2,
    "属性名3":属性值3,
    "属性名4":属性值4
    }

    > JSON运行属性值的类型:
    1.字符串
    2.数字
    3.布尔
    4.对象
    5.数组
    6.null

    > 数组:
    [属性1,属性2,属性3,属性4]

    [3] JS中使用JSON
    JSON对象 --> JSON字符串
    JSON.stringify(对象)
    JSON字符串 --> JSON对象
    JSON.parse(JSON字符串)

    [4] Java中使用JSON
    > 目前Java中用的比较多的JSON解析工具:
    json-lib --> 使用麻烦,解析性能最差
    Jackson --> 使用较麻烦,解析性能最好
    Gson --> 使用简单,解析性能中能
    - Gson是谷歌出的一款JSON解析工具,使用简单,且性能较好。

    Java对象 --> JSON字符串

    JSON字符串 --> Java对象

    3.通过jQuery实现AJAX
    > 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
    > post方法不会有缓存的问题,所以我们开发时使用post方法较多。
    [1] post()方法
    $.post(url, [data], [callback], [type])
    参数:
    url:发送AJAX的请求地址,字符串。
    data:发送给服务器的请求参数,JSON格式。
    callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
    jQuery会将响应信息以回调函数的参数的形式返回
    type:响应信息的类型,字符串。一般两个常用值text、json

    [2] get()方法
    - get方法和post方法使用方式基本一致。

    [3] getJSON()方法
    getJSON(url, [data], [callback])
    getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。

  • 相关阅读:
    ES6 generator生成器
    ES6 Class类(简单理解封装和继承)
    谷歌(chrome)浏览器下载文件另存为其它地址
    ES6 中的解构数组和对象
    获取数组中某一个元素的下标
    删除数组对象中某一个指定的对象
    jquery复选框全选功能
    正则获取字符串中的数字
    js刷新当前页面,刷新父页面
    找出最长序列的长度
  • 原文地址:https://www.cnblogs.com/a1a1-3/p/7402224.html
Copyright © 2011-2022 走看看