AJAX技术第一节 ---- XMLHttpRequest 和 数据交互

AJAX技术

即Asynchronous Javascript And XML ,AJAX不是一门新的语言,而是对现有技术的综合利用

本质:是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通讯

作用:可以在页面不刷新的情况下,请求服务器局部更新页面的数据

同步与异步(了解)

指某段程序执行时不会阻塞其他程序执行,其变现形式为程序的执行顺序不依赖程序本身的书写顺序,相反就是同步

同步:同一时刻只能做一件事,上一步完成才能开始下一步

异步 : 同时做多件事情,效率更高,做一件事情时,不影响另一件事情的进行

XMLHyypRequest可以以异步方式处理程序

一. XMLHttpRequest

浏览器內间对象,用于在后台与服务器通讯(交换数据) 由此我们便可实现对网页的部分更新,而不是刷新整个页面

1.发送get请求

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

// 使用XMLHttpRequest发送get请求的步骤
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequery();
// 2.设置请求行
// 第一个参数:请求方式  get/post
// 第二个参数:请求地址  需要在url后面拼上参数列表
xhr.open('get','form.php?name=zs');
// 3.设置请求头
xhr.setRequestHeader('content-type','text/html');
// 浏览器会默认添加基本的请求头,het不用设置
// 4,设置请求体
// get请求的请求体为空,因为参数裂变拼接到url后面了
xhr.send(null);

get请求,设置请求行时,需要把参数列表拼接到url后面

get请求不用设置请求头

get请求的请求体为null

2.发送post请求

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必须设置请求头中的content-type为application/x-www-form-urlencoded

post请求需要将参数列表设置到请求体中

3.获取响应

HTTP响应分为3个部分,状态行,响应头,响应体

//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onreadystatechange = function () {
  if(xhr.readyState == 4){
    //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: 请求未初始化(还没有调用 open( ))

1:请求已经建立,但是还没有发送(还没调用send( ))

2:请求已发送,正在处理中

3:请求正在处理中,通常响应已有部分数据可用了,但是服务器还没有完成响应的生成

4:响应已经完成:可以获取并使用服务器的响应了(我们只关心4即可)

总结:AJAX四部曲

//  1-创建一个XMLHttpReqeust对象
  var xhr = new XMLHttpRequest();
  console.log(xhr.readyState); // 0 
            
 //  2-设置请求报文
 //  2-1请求行
 xhr.open('get', './01-ajax.php');
 console.log(xhr.readyState);  // 1
 //  2-2请求头
 xhr.setRequestHeader('content-type', 'text/html');
 //  2-3请求主体  send()方法执行后，请求就已经发送出去了
 xhr.send(null);

 // 3-接受服务器返回的响应数据       
 xhr.onreadystatechange = function () {
     console.log(xhr.readyState);
      // 当服务器处理完成 并且成功处理了请求 获取服务器返回的数据 
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 获取服务器返回的数据
          var result = xhr.responseText; // 获取服务器返回响应文本（响应主体）
          // console.log(result);
          //获取全部响应头
          console.log(xhr.getAllResponseHeaders());
          //获取指定响应头
          console.log(xhr.getResponseHeader('Content-Length'));
      }
}

二.数据交互

浏览器端知识负责用户的交互和数据的收集以及展示,真正的数据都是存储在服务器端的.

我们现在只能返回一些简单的数据(一个字符串),但是实际开发过程中,肯定会设计到大量的复杂累死俺的数据传输,比如数组,对象等,但是每个变成语言的语法都不一样,因此我们会通过数据交换格式(XML,JSON)来进行数据的交互

1.XML

什么是XML?

XML指可扩展标记语言(EXtensible Markup Language)

XML 是一种标记语言,很类似与HTML

XML的设置宗旨是传输数据,而非显示数据

XML标签没有被预定义,需要自己自定义标签

语法规范

1 . 第一行必须是版本信息

2 . 必须有一个根元素(有且仅有一个)

3 . 标签不能有空格,不能数字或者点 . 开头大小写敏感

4 . 不能交叉嵌套,都是双标签,如果是单标签,必须闭合

5 . 属性双引号(浏览器会自动修改成双引号)

6 . 特殊符号要使用实体

7 . 注释和HTML一样

//.xml
<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文件的内容

//.php

//注意，如果需要返回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

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

缺点:虽然可以描述和传输复杂数据,但是解析过于复杂并且体积大,所以很少有

2.JSON

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

1. 数据在名称/值对中

2. 数据由逗号分隔(最后一个键/值对不能带逗号)

3. 花括号保存对象,方括号保存数组

4. 键使用双引号

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON数据在不同语言进行传输时,类型是字符串,不同的语言也有解析的方法,解析完才能读取

php处理json

1.php关联数组  --> json     json_encode()

// php的关联数组
$obj = array(
  "a"=>"hello",
  "b"=>"world",
  "name"=>"胡聪聪"
);
//json字符串
$json = json_encode($obj);
echo $json;

2. json  -->  php对象     json_decode()

$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

1.js对象 --> json字符串   json.stringify(obj)

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

2.json字符串  --> js对象json.parse(obj)

//json是一个json字符串
var json = '{"a": "Hello", "b": "World"}';
//obj就变成了一个js对象
var obj = JSON.parse(json);// {a: 'Hello', b: 'World'}