js►Ajax

03-AJAX,XML,JSON,jquery-ajax

AJAX

即 Asynchronous [e’sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

同步与异步

同步和异步概念：

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行，从而提升整体执行效率。

ajax技术的应用：

  1. 验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。
  2. 百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。

XMLHttpRequest可以以异步方式的处理程序。

XMLHttpRequest

浏览器内建对象，用于与服务器通信(交换数据) ， 由此便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

发送get请求

XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。

1
2
3
4
5
6
7
8
9
10
11
12
// 使用XMLHttpRequest发送get请求的步骤
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest;// 构造函数没有参数的情况,括号可以省略
// 2. 设置请求行
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=hucc");
// 3. 设置请求头
// 浏览器会默认添加基本的请求头,get请求时无需设置
// 4. 设置请求体
// get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);
  • get请求,设置请求行时,需要把参数列表拼接到url后面
  • get请求不用设置请求头
  • get请求的请求体为null

发送post请求

1
2
3
4
5
6
7
var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=hucc&age=18");
  • post请求,设置请求行时,参数列表不能拼接到url后面
  • post必须设置请求头中的content-type为application/x-www-form-urlencoded
  • post请求需要将参数列表设置到请求体中.

获取响应

HTTP响应分为3个部分，状态行、响应头、响应体。

1
2
3
4
5
6
7
8
9
10
//给xhr注册一个onload事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onload = function () { 
    //1. 获取状态行
    console.log("状态行:"+xhr.status);
    //2. 获取响应头
    console.log("所有的相应头:"+xhr.getAllResponseHeaders());
    console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
    //3. 获取响应体
    console.log(xhr.responseText);
}

readyState

readyState:记录了XMLHttpRequest对象的当前状态

0：请求未初始化。
1：请求已经建立，但是还没有开始发送。
2：请求已发送，正在处理中
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。(只需要关注状态4即可)

数据交互

XML

  • XML 指可扩展标记语言（EXtensible Markup Language）
  • XML 是一种标记语言，很类似 HTML
  • XML 的设计宗旨是传输数据，而非显示数据
  • XML 标签没有被预定义。您需要自行定义标签。

语法规范

  • 第一行必须是版本信息
  • 必须有一个根元素（有且仅有一个）
  • 标签不可有空格、不可以数字或.开头、大小写敏感
  • 不可交叉嵌套，都是双标签，如果是单标签，必须闭合
  • 属性双引号（浏览器自动修正成双引号了）
  • 特殊符号要使用实体
  • 注释和HTML一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
        <desc>路人甲</desc>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>男</gender>
        <desc>路人乙</desc>
    </student>
</students>

php获取xml文件的内容

1
2
3
4
5
6
// 注意，如果需要返回xml数据，需要把content-type改成text/xml,不然浏览器以text/html进行解析。
header('content-type:text/xml;charset=utf-8');
// 用于获取文件的内容
// 参数：文件的路径
$result = file_get_contents("data.xml");
echo $result;

html解析xml

1
2
3
4
// 获取服务端返回的xml数据，需要使用xhr.responseXML，这是一个document对象，可以使用DOM中的方法查找元素。
var data = xhr.responseXML;
// 获取所有的学生
var students = data.querySelectorAll("student");

缺点：虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大。

JSON数据

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

  • 数据在名称/值对中
  • 数据由逗号分隔(最后一个健/值对不能带逗号)
  • 花括号保存对象，方括号保存数组
  • 键使用双引号
1
2
var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

php处理json

  • php关联数组=> json
1
2
3
4
5
6
7
8
9
// php的关联数组
$obj = array(
  "a"=>"hello",
  "b"=>"world",
  "name"=>"胡聪聪"
);
// json字符串
$json = json_encode($obj);
echo $json;
  • json=>php对象
1
2
3
4
5
6
7
8
9
10
11
12
13
$json = '{"a": "Hello", "b": "World"}';//json字符串
// 第一个参数：json字符串
// 第二个参数：
	// false，将json转换成对象(默认)
	// true：将对象转换成数组(推荐)
$obj = json_decode($json,true);
echo $obj['a'];

// 通过json文件获取到的内容就是一个json字符串。
$data = file_get_contents("data.json");
// 将json转换成数组
$result = json_decode($data, true);
print_r($result);

JS处理json

  • JS对象 => JSON字符串 JSON.stringify(obj)
1
2
3
4
// obj是一个js对象
var obj = {a: 'Hello', b: 'World'}
// result就变成了一个json字符串了
var result = JSON.stringify(obj);// '{"a": "Hello", "b": "World"}'
  • JSON字符串 => JS对象 JSON.parse(obj)
1
2
3
4
// json是一个json字符串
var json = '{"a": "Hello", "b": "World"}';
// obj就变成了一个js对象
var obj = JSON.parse(json);// {a: 'Hello', b: 'World'}

兼容性处理

1
2
3
4
5
6
7
8
var xhr = null;
if(XMLHttpRequest){
  // 现代浏览器
  xhr = new  XMLHttpRequest();
}else{
  // IE5.5支持
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}

jQuery中的ajax方法

jQuery提供了更强大的Ajax封装

$.ajax

参数列表

参数名称描述取值示例
url接口地址url:”02.php”
type请求方式get/posttype:”get”
timeout超时时间单位毫秒timeout:5000
dataType服务器返回的格式json/xml/text(默认)dataType:”json”
data发送的请求数据对象data:{name:”zs”, age:18}
beforeSend调用前的回调函数function(){}beforeSend:function(){ alert(1) }
success成功的回调函数function (data) {}success:function (data) {}
error失败的回调函数function (error) {}error:function(data) {}
complete完成后的回调函数function () {}complete:function () {}

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.ajax({
  type:"get",// 请求类型
  url:"02.php",// 请求地址
  data:{name:"zs", age:18},// 请求数据
  dataType:"json",// 希望接受的数据类型
  timeout:5000,// 设置超时时间
  beforeSend:function () {
    // alert("发送前调用");
  },
  success:function (data) {
    // alert("成功时调用");
    console.log(data);
  },
  error:function (error) {
    // alert("失败时调用");
    console.log(error);
  },
  complete:function () {
    // alert("请求完成时调用");
  }
});

其他api

1
2
3
4
5
// $.post(url, callback, [dataType]); // 只发送post请求
// $.get(url, callback, [dataType]);
// $.getJSON(url, callback);
// $.getScript(url,callback); // 载入服务器端的js文件
// $("div").load(url); // 载入一个服务器端的html页面。