JavaScript学习（一）AJAX

JavaScript学习（一）AJAX

AJAX(Asynchronous JavaScript And XML)顾名思义，是一种用于异步JavaScript请求JSON数据的交互式网页开发技术。

普通的，通过提交form表单与后端交互，页面加载与后端的信息交互是同步的，从而会产生一定的请求等待时间，并使浏览器页面重新渲染，用户体验较差。

且当页面内容较多，尤其是隐藏内容较多，我们没有必要在打开页面时将所有内容都渲染出来......

AJAX提供了这样的方法，使信息交互不会影响前端页面，即信息交互与页面加载异步执行。

AJAX基于技术浏览器自带的XMLHttpRequest函数，由它构造的对象可以帮助我们进行前后端数据异步交互

原理：

当页面局部获取数据或者更新状态时，只需要请求核心变动信息，然后后台接收处理该请求，并将返回的信息打包为JSON对象传回前端，通过DOM的操作对页面进行动态渲染，从而实现局部刷新。

①想要使用ajax，首先，我们要实例一个XMLHttpRequest对象

let xhr = new XMLHttpRequest()

②既然是用于与后端交互，我们就要知道请求的地址和方式（主要是get/post），以下是几种请求方式

• get    ——主要用于接收数据
• post  ——主要用于发送数据
• head ——用于请求头信息的传递，普通的，使用post请求方式时就需要一个头信息的传递
• delete——服务器数据删除//存在风险，不建议使用
• put    ——发送数据，并将服务器数据删除，也就是数据替换//存在风险，不建议使用

了解了请求方式，可以了解一下请求发送与数据接收的流程

以下代码用于理解流程，不要直接使用

/*我们使用open方法进行请求，其中需要提交的信息有请求方式、路径、是否异步
    1.method：请求方式，本质上get和post可以替代其他那些不常用方式,不区分大小写
    2.url：发送请求的后台地址
    3.async：异步方式，true为异步，false为同步
*/
/*---------------------------------------------------------------*/
//以下为需要传输的数据
let data = {
    name:'buza',
    age:'3'
}
/*---------------------------------------------------------------*/
//以下为get请求：
    //get请求，将提交的请求信息附加在网址中,而不是作为send()的参数进行传递
    //发送的数据用&拼接，以键值对的形式传递，并用？附加在地址后
//这是一个将数据格式转换为？a=va&b=vb&c=vc形式的方法
function join(data){
    let str = '?'
    for(i in data){
        str+=i+'='+data[i]+'&'
    }
    return str.replace(/&$/,'');//正则表达式，将结尾的&裁切掉
}
xhr.open('GET','http://yourBackstageLocation'+join(data),true)

xhr.send(null)

/*---------------------------------------------------------------*/
//以下为post请求
    //post请求需要请求头
    //数据以参数形式传给send方法
//这是一个将数据格式转换为a=va&b=vb&c=vc形式的方法
function join(data){
    let str = ''
    for(i in data){
        str+=i+'='+data[i]+'&'
    }
    return str.replace(/&$/,'');//正则表达式，将结尾的&裁切掉
}
//注意：open与setRequestHeader的顺序不可颠倒
//注意，地址后要加一个问号，不然问号会被当做传递的数据传给后台
xhr.open('POST','http://yourBackstageLocation?',true)
//这里设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset =utf-8')
xhr.send(join(data))

/*send操作将请求发送，并且不会刷新页面，而后台经过处理后，
  从后台发来的信息将返回给xhr.responseTest
  为了接收后台发来的信息，我们要先判断数据何时返回，
  那么就要对xhr对象进行事件监听，判断其处于何种状态
*/

更多请求头信息可以看大佬的博客https://blog.csdn.net/lea__dongyang/article/details/79739315

为了得知xhr的状态变化，我们要使用onreadystatechange对xhr进行事件监听，页面向后台发送请求时，xhr的状态就会发生改变，只有在正确的状态下才能发送请求成功，然后后台接受数据并返回数据
    xhr.readystate有如下几种：

        0.ajax请求建立而没有初始化

        1.(设置初始状态, 并没有发送请求) xhr对象调用open方法readyState就变成了1

        2. (发送完成，后台接收完成) send方法执行完成的时候, 这个方法是异步方法,所以不能直接活的状态.需要监听事件, 事件名称为readstatechange

        3.(等待解析状态的完成)  也是一个异步事件, 此时是在后台去处理

        4.(解析处理完成) 后台接受数据并返回成功

 

当我们的http状态码>=200&&状态码<300||状态码=304时，可以视为请求成功

以下代码用于理解流程，不要直接使用

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){               //状态为4
        if(xhr.status>=200&&xhr.status<300||xhr.status===304){  
        //http状态码为200到300之间或为304
            let res = xhr.responseText  //接收后台返回信息
        }
    }
}

下面给出可以直接拿去用的代码（ES6）

var data ={
    name: "buza",
    age: "3",
}
//用一个josn形式的data变量储存你要传输的数据
function join(data){
    let str = ""
    for(let i in data){
    str+= i+"="+data[i]+"&"
     }
    return str.replace(/&$/, "")
}
//这个方法将数据转化为para1=val1&para2=val2....的形式
function ajax1(){
    let xhr =new XMLHttpRequest()

//post方法如下
//    xhr.open("post", "http://localhost:8080?", true)
//    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
//    xhr.send(join(data))
//get方法如下
    xhr.open("get","http://localhost:8080?"+join(data),true)
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status>=200 && xhr.status<300 || xhr.status===304){
                document.body.innerHTML+=xhr.responseText
            }
        }            
    }
}

JQ实现AJAX

jQuery封装了AJAX的方法，当然，首先要引入jQuery，实现的代码如下

$.ajax({
    url:'http://yourBackstageLocation',
    type:'GET',
    data:{
        name:'buza',
        age:3
    },
    success:function(data){
        let res = data//接收后台返回的数据
    }
})
$.ajax({
    url:'http://yourBackstageLocation',
    type:'POST',
    data:{
        name:'buza',
        age:3
    },
    success:function(data){
        let res = data
    }
})