Ajax的基础了解

Ajax
    前端可以利用ajax访问到接口中的数据。 当接口程序启动起来以后， 就可以通过ajax访问接口获取到数据， 对数据做操作。
    --Ajax语法
    步骤：
    1、创建Ajax对象      var xhr = new XMLHttpRequest()
    当构造函数不需要传参数的时候，new的对象后面可以省略小括号--var xhr = new XMLHttpRequest
    2、设置请求信息      xhr.open(请求方法get/post，请求地址，是否是异步的布尔值)  默认为true true代表是异步
         如果是post请求，则需要在open之后send之前加上头信息
         xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    3、发送请求          xhr.send()
    4、监听请求状态
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {   //判断是否请求结束
            if (xhr.status >= 200 && xhr.status < 300) {  //status为http状态码，判断是否请求成功
                var res = xhr.responseText;  //responseText获取完整的相应数据
                                 当ajax需要接收xml文件数据就用：xhr.responseXML
                console.log(res)
                此时这里输出的是json的字符串，就可以使用到JSON.stringify(json对象) 和 JSON.parse(json字符串)两种方法来转换字符串或对象。
            }
        }
    }
    --http标准码状态:  (记)
     １ 开头正在进行中
     ２ 开头各种成功
     ３ 开头重定向或者缓存
     ４ 开头各种客服端的错误
     ５ 开头服务器错误
    -----------------------------------------------
    json数据
    数组和对象被称为json对象，长的像数组或对象的字符串，叫做json字符串。

         json对象转json字符串
    JSON.stringify(json对象)

         json字符串转json对象
    JSON.parse(json字符串)

    例如：
    var obj = {     
        age: 12,
        name:'李九'
    } 
    console.log(obj);
    console.log(JSON.stringify(obj));//转换成功，这是json对象

    var str = '{age:12}'
    console.log(str);
    console.log(JSON.parse(str)); //转换不成功，这不是json字符串

    如果想要var str = '{age:12}'成为json字符串，那里面的键一定要加双引号，加单引号不行
    var str = '{"age":12}'   //这样就能成功转对象，这才是json字符串

    var str = '12323'  //数字类字符串    //转换成功  

    var str = 'true'  //布尔值   //转换成功  

    var str = null  //null   //转换成功  

    var str = '[1,2,3]' //数组类字符串   //转换成功
    console.log(str);
    console.log(JSON.parse(str));  

    这种方法只能转换json字符串或数组类字符串或布尔值或null，其他字符串都会报错
    -----------------------------------------------
    get请求：
    1、 直接在浏览器的地址栏中请求的
    2、 点击a标签跳转到另一个页面
    3、 引入文件的请求， link引入css、 script引入js、 img引入图片、 iframe引入html页面
    4、 form的get提交或默认提交
    5、 ajax发送的get请求

    get带参数的请求：
        get请求的参数会放在浏览器的地址栏中，在？后面的键值对都属于get请求的参数
        在设置请求信息 xhr:open('get',http://localhost:888/test/XXX??键=对&键=对)方法中填写    

    post请求：
    post请求的参数要放在xhr.send('键=值&键=值')方法中填写 在此之前还需要在send之前加一个头信息
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    -----------------------------------------------
    Ajax可以请求文件
        在xhr.open('get','请求的文件名')
        如果当请求的文件里有js执行的代码，这时输出它只能得到这个文件里面的内容，如果想要里面的内容执行，就可以使用  eval()  这个函数