AJAX

AJAX基础

原有提交数据方式

原有技术提交表单向后端提交数据

action后面的地址：访问这个地址，并且还要携带？后面的数据

<!-- 如果action里没有地址，表示发给自己 -->
    <form action="http://127.0.0.1">
        <!-- 表单必须要有name属性
        用来描述数据的，哪个是密码，哪个是用户名 -->
        <input type="text" name="username">
        <br>
        <input type="password" name="userpwd">
        <br>
        <input type="submit">
    </form>

url问号后面携带data数据key = value & key = value

http://127.0.0.1/?username=1234&userpwd=5678

AJAX

AJAX是一种数据传递的概念——它的实现方式就是new XMLHttpRequest

XML与JOSN都是数据载体

AJAX Async JavaScript and XML ->异步的 JS 与XML数据通讯(现在通讯使用的数据载体是JOSN)

JSON -> JavaScript Object Notation -> JavaScript对象表示法的字符串

 <xml>
     <name>Tom</name>
     <age>8</age>
     <gender>male</gender>
</xml>

//JOSN 的 key 必须是字符串形式
//只能使用双引号，单引号只能单做普通字符使用
//好处是 value 的数据类型直接就可以看到

{
    "name": "Tom",
    "age": 8,
    "gender": "male"     
}

网络请求里只能发送文本数据，不能发送对象

JSON

//创建一个对象
var o = {
    "name": "Tom",
    "age": 8,
    "gender": "male"
}

//对象表示法的字符串
var json = '{"name": "Tom", "age": 8,"gender": "male"}'

console.log(o);
//Object { name: "Tom", age: 8, gender: "male" }
console.log(json);
//{"name": "Tom", "age": 8,"gender": "male"}

直接将一个对象转成字符串

全局中有一个JOSN对象，身上有一些方法

所有数据类型进行转换时，只有function以及undefined转换不了

会深度转换，里面有对象还会深入转换

//创建一个对象
var o = {
    "name": "Tom",
    "age": 8,
    "gender": "male",
    'a': null,
    b: undefined,
    c: function() {},
    d: {
        info: "+++++"
    },
    e: [1, 2, 3]
}

//将对象转为字符串
var res = JSON.stringify(o);
console.log(res);
// {"name":"Tom","age":8,"gender":"male","a":null,"d":{"info":"+++++"},"e":[1,2,3]}

JSON分为两种：

对象JSON字符串

数组JSON字符串：遇到非法字符全部转为null

var arr = [1, 2, null, undefined, function() {}]

var json = JOSN.stringify(arr);

console.log(json);
//[1, 2, null, null, null]

如何拿数据

网易云音乐的api需要自己嫁到服务器上，另一个是使用文档

建立网络链接：请求方法有几十种(PUSH、DELETE)。常用的有GET、POST

发送网络请求：我想要什么数据，没有给就会把所有数据返回

返回的数据全部装到xhr.response里

xhr.readyState来获取状态

要判断两个状态，一个网络状态，一个AJAX状态

网络状态码：

• 100：还在请求中，还没结束
• 200：ok
• 300：重定向，服务器跳转到其他地方，为了解决重定向，在后面Date.now()
• 400：客户端错误
• 500：服务端错误

BS端软件：浏览器与服务器之间的架构

cs端：客户端（qq）和服务器之间的架构

1.浏览器首先向服务器发送请求（客户端向服务器要东西）——请求

2.服务端收到请求后会根据你的请求数据，来准备数据（处理网络请求）——处理

3.服务端返回响应数据给客户端 ——响应