Ajax与json

一 .Ajax

1. 简介

作用： 发送请求获取响应数据。 AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

 2.使用

获取对象

//新版本浏览器创建请求对象
let xmlHttpRequest = new XMLHttpRequest();
//IE5,IE6老版本浏览器
let xmlHttpRequest =new ActiveXObject("Microsoft.XMLHTTP");

  get方式

xmtHttp.open("GET","/day_web_Filter/LoginServlet.do?username="+username+"&password="+password,true);
xmtHttp.send(null);

post方式

xmtHttp.open("POST","/day_web_Filter/LoginServlet.do",true);
//POST设置请求头(千万别丢了)
xmtHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmtHttp.send("username="+username+"&password="+password);

open(里面第一个参数是请求方式,第二个是URL,第三个是是否异步(true表示异步))

send(请求参数)

3. 获取服务器响应

 xmtHttp.onreadystatechange = function (){
             console.log(xmtHttp.readyState)
             if(xmtHttp.readyState == 4 && xmtHttp.status == 200){
                  let msg = xmtHttp.responseText;
                  console.log(msg);
                  document.getElementById("msg").innerHTML = msg;
                  document.getElementById("msg").style.color="red";

             }
 }

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK"404: 未找到页面

4. Ajax的封装

//1.创建一个创建XMLHttpRequest对象函数
function createXMLHttpRequest(){
    if (window.XMLHttpRequest)
    {
        //主流浏览器
        return new XMLHttpRequest();
    }
    else
    {   // code for IE6, IE5
        return  new ActiveXObject("Microsoft.XMLHTTP");
    }
}

//2.创建ajax请求函数
/*
* -请求方式:method
* -请求的URL地址: url
* -是否异步: aync
* -请求参数: data
* -响应数据类型: dataType
* -回调函数(处理响应数据的函数):callback
* */
function ajax(option){
    //1.创建请求对象
    let xmlHtpp = createXMLHttpRequest();
    if(option.method == undefined){
        //默认请求方式为GET
        option.method = "GET";
    }
    if(option.aync == undefined){
        //默认异步
        option.aync = true;
    }
    //2.发送请求
    xmlHtpp.open(option.method,option.url,option.aync);
    if(option.method == "POST"){
        xmlHtpp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }
    xmlHtpp.send(option.data);
    //3.获取响应数据
    xmlHtpp.onreadystatechange = function(){
        if(xmlHtpp.readyState == 4 && xmlHtpp.status == 200){
            let data = null;
            if(option.dataType == "XML"){
                //默认响应的数据为字符串数据
                data = xmlHtpp.responseXML;
            }else if(option.dataType == "STRING"){
                data = xmlHtpp.responseText;
            }else if(option.dataType == "JSON"){
                data = JSON.parse(xmlHtpp.responseText);
                //data = eval('('+xmlHtpp.responseText+')');
            }else{
                data = xmlHtpp.responseText;
            }
            //调用回调函数
            option.callback(data);
        }
    }
}

5. 使用JQuery封装好的Ajax

get方式

$.get({
                url:"/day_web_Filter/LoginServlet.do?username="+username+"&password="+password,
                dataType:"text",
                success:function (data){
                    $("#msg").html(data);
                    $("#msg").css("color","red");
                }
            })

post方式

$.post({
                url:"/day_web_Filter/LoginServlet.do",
                data:"username="+username+"&password="+password,
                dataType:"text",
                success:function (data){
                    $("#msg").html(data);
                    $("#msg").css("color","red");
                }
            })

他们请求方式不同所以data的位置不同,get也可以有data

二.json

1.JSON是什么

JSON其实就是一种JS对象格式的字符串,他有很多种比如json-lib ,开源的Jackson ​​​​​​​,Google的Gson ​​​​​​​,阿里巴巴的FastJson

2.具体使用(以FastJson为例)

1.对象转换json

String json = JSON.toJSONString(对象);

2.json转换对象

 Book book = JSON.parseObject(json, Book.class);

 3.JQuery对象转化成JSON

 let user={};
    user.username=username;
    user.password=password;
    user.phone=phone;
   let value = JSON.stringify(user);