AJAX介绍

目录

AJAX介绍： 

JS原生的ajax：

XMLHttpRequest 对象

1.向后台发送请求

2. 设置请求的方式和url地址

3. 发送请求（请求体，只有post有请求体）

4.指定xhr状态变化的处理函数

JQuery的AJAX

简易发送GET请求

简易发送POST请求

表单数据如何进行提交呢：

JSON

Vue的AJAX

---

我们一般发送请求的方式有四种：

1. 地址栏
2. a标签
3. form表单
4. location.href或window.open()

但是以上请求都会实现跳转页面等操作。那我们要想有一个既能提交数据，又能不跳转页面并更新网页内容，有没有可能呢，接下来我们学习的AJAX就拥有这个功能

AJAX介绍： 

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

异步：整个页面不会全部刷新，只有某个局部在刷新eg:验证用户名是否存在

注意

1：使用ajax发送请求，页面是 不可以通过后台跳转! ! !

      如果需要跳页面，也是通过我们前端的JS来跳转，不可能通过servlet跳转

2：ajax和form表单不能同时使用。他们之间是相互冲突的。

ajax：不跳页面。

form：一定会跳。

JS原生的ajax：

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

使用方式：

1.向后台发送请求

let xhr=new XMLHttpRequest();

2. 设置请求的方式和url地址

可以设置请求是get或post，url地址可以传值

xhr.open("post","valid.do")
//或
xhr.open("get","valid.do?username="+username);

3. 发送请求（请求体，只有post有请求体）

Post请求需要配置请求头信息

//post请求：发送请求头，send发送请求体
xhr.setRequestHeader("Content-type","application/x-ww-form-urlencoded")
xhr.send("username="+username+"&password=123456")
//get请求：没有请求体，设置null
xhr.send(null);

4.指定xhr状态变化的处理函数

.onreadystatechange=function(){}

通过responseText获取对应的响应体

xhr.onreadystatechange=function(){
    if(this.readyState == 4){
    //通过xhr的responseText获取到对应的响应体
    console.log(this.responseText);
    }
}

我们看到有一个判定条件：this.readyState==4

这个是怎么判定的，为什么要等于四呢？

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义。

0：xhr被创建，方法未被调用。对象还没完成初始化

1：open被调用，开始发送请求，建立连接

2：send被调用，发送完成，可以获取状态行和响应头

3：可以拿到响应体，响应体加载中，进行解析

4：响应体下载完成，响应结束，可以直接使用responseText获取内容

JQuery的AJAX

$(function(){
    $("#va").click(function(){
        let username = $("#username").val();
//      完整写法
        $.ajax({
            url:"va.do",
            type:"post",
            //以键值对存储
            data:{"username":username,"password":password},
            //成功了会走这个
            success:function(res){
                console.log(res);
            },
            //失败了会走这个
            error:function(res){
                console.log(res);
            }
        })
    })
})

简易发送GET请求

data是后台响应回来的响应体

$.get("valid.do?username=" + username,function (data) {
    //传回来的参数是data    
});

简易发送POST请求

$.post("valid.do","username=" + username,function (data) {
    //传回来的参数是data    
});

表单数据如何进行提交呢：

利用formData构建一个表单数据对象:

let formData = new FormData();

formData.append("username",username);

formData.append("password",password);

之后在data里写formData;{data:formData,}

JSON

json是JavaScript对象表示法，用来传递对象的，毕竟单纯的js是不可能有对象这个概念的

语法：

[
    { "name":"pike" , "url":"www.dream.com" }, 
    { "name":"yeah" , "url":"www.google.com" }, 
    { "name":"aoli" , "url":"www.baidu.com" }
];

对象：

{ "name":"potato", "age":10, "sex":null }

Vue的AJAX

在vue里对原生ajax进行了封装：axios;

需要导包：axios.min.js

axios发送get请求:
请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任何区别。
axios发送post请求:
请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。 

 const app = new Vue({
        el:"#app",
        data:{},
        methods:{
            post(){
                // 发送post请求
                axios.post("vue.do",{
                    "username":"xiaoqiang",
                    "password":"000000"
                }).then(function(response){
                    console.log(response);
                });
            },
            get(){
                // 发送get请求
                axios.get("vue.do?username=admin&password=666666").then(function(response){
                    console.log(response);
                    console.log(response.data);
                }).catch(function(err){
                    console.log(err);
                });
            }
        },
    });

但是在后台：

request.getParameter()方法只能接收默认的文档流中的参数，接不了json串

怎么获取json传过来的串呢：

一：从request中获取了一个流，缓冲字符输入流
1、get请求，后台没有对应的对象来封装，不能有私密数据。
2、post请求，后台都是有对象跟着的。username,password-----User
                                          id,name,age,gender,email-----------Student

BufferedReader reader = request.getReader();
String line = reader.readLine();

二：封装对象的前提：
json串中的数据的key和对象的属性名要一致。是根据set方法的名封装的。

User user = JSON.parseObject(line, User.class);