ajax

目前我们所学习的跟服务器交互手段比较主流的是form表单

但是,form表单的交互特点是: 会刷新整个页面而且是同步加载(上面不请求完下面没办法请求)

所以我们急需一种交互技术:

可以实现异步请求局部刷新

所以ajax应运而生:

ajax特点: 异步请求局部刷新

ajax: Asynchronous JavaScript And XML

异步的 js 和 xml

如何发起一个ajax的网络请求:

ajax五步骤

AJAX的五步骤:

* 1.构建异步请求对象(XMLHttpRequest)

* 2.调用open方法打开链接传入请求方式以及url等参数

* 3.调用send方法发起网络请求

* 4.注册状态事件

* 5.在状态改变事件的驱动函数里面判断状态处理返回数据

* 返回数据处理

* 经过我们观察发现 readyState属性的五个状态只有等于4的时候是数据响应成功

* 所以我们要判断为4的时候处理数据

* 经过测试发现单单判断readyState不够因为还需要判断响应码是否是200

* status 属性返回200 才算是数据成功

* 经过成功返回打印ajax对象我们看到 ajaxObj.responseText是返回字符串数据

PHP代码1

<?php
    header('Content-type:text/html;charset=utf-8');

//    获取客户端提交的POST数据
    $name=$_POST["username"];
    $pwd=$_POST["password"];

    echo "你post提交数据成功!--->$name ---->$pwd";


?>

PHP代码2

<?php
    header('Content-type:text/html;charset=utf-8');
//    获取get方式提交的参数

    $name=$_GET["username"];
    $pwd=$_GET["password"];

    echo "你get提交数据成功!--->$name  --- $pwd";


?>

html代码

var btnArr=document.getElementsByTagName("button");
    var h1=document.getElementsByTagName("h1")[0];
    btnArr[0].onclick=function () {
//         1.构建异步请求对象(XMLHttpRequest)
        var ajaxObj=new XMLHttpRequest();
//        2.调用open方法 打开链接 传入 请求方式 以及url等参数
        ajaxObj.open("get","php/data/qq.txt");
//        3.调用send方法 发起网络请求
        ajaxObj.send();
//        4.注册状态事件
        ajaxObj.onreadystatechange=function () {
//            5.在状态改变事件的驱动函数里面 判断状态 处理返回数据
//            console.log("访问成功啦!");

            if(ajaxObj.readyState==4 && ajaxObj.status==200){
                /*console.log(ajaxObj.readyState)
                console.log("访问成功啦!");*/
                console.log(ajaxObj.responseText);
            }
        }
    }
    
    btnArr[1].onclick=function () {
//        1.构建异步请求对象
        var ajaxObj=new XMLHttpRequest();
//        2.open方法 传入 请求方式 url等参数
        ajaxObj.open("get","php/03.ajaxGetData.php");
//        3.send方法 发起网络请求
        ajaxObj.send();
//        4.注册状态改变事件
        ajaxObj.onreadystatechange=function () {
//            5.处理返回数据
            if(ajaxObj.readyState==4 && ajaxObj.status==200){
//                console.log(ajaxObj.responseText);
                h1.innerHTML=ajaxObj.responseText;

            }
        }
        
    }

ajax兼容性写法

//创建ajax的兼容写法
function createXHR()
{
	var req = null;
	
	if(window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else
	{
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return req;
}

get请求和post请求的区别:

get偏向从服务器获取数据(顺带着给服务器提交一些简单数据)

post偏向给服务器提交大量数据

向服务器提交数据get和post分别如何处理:

get方式向服务器提交数据:

url后面?问号拼接参数

ajaxObj.open("get","服务器地址?键1=值1&键2=值2...")

post方式向服务器提交数据:

ajaxObj.send("键1=值1&键2=值2.....")

经过测试发现: form表单post提交参数是:

请求头里面的Content-type的值是: application/x-www-form-urlencoded

ajax默认的post提交并不是这种请求头的方式所以我们要自己修改

ajaxObj.setRequestHeader("键","值")

ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded")

要在open之后 send之前设置

get请求:

提交的参数在地址栏(也就是请求头里面)

速度相对更快

get方式请求不安全

不安全体现在 get方式可以被缓存被存入书签被加入收藏夹有历史记录

post请求:

提交的参数在请求体里面

速度相对慢一点

post方式相对安全

php代码1

<?php
    header('Content-type:text/html;charset=utf-8');
//    获取客户端post提交的数据
    $name=$_POST["username"];
    $pwd=$_POST["password"];

    echo "我是服务器的post数据,你post到了么?参数是:$name <----->$pwd";
?>

php代码2

<?php
    header('Content-type:text/html;charset=utf-8');

//    接收客户端get方式提交过来的数据
    $name=$_GET["username"];
    $pwd=$_GET["password"];
    echo "我是服务器get数据,你get到了么?参数是:$name <---->$pwd";

?>

html代码

<script>
    var btnArr=document.getElementsByTagName("button");
    var username=document.getElementById("username");
    var password=document.getElementById("password");
    btnArr[0].onclick=function () {
        var ajaxObj=new XMLHttpRequest();
        ajaxObj.open("post","php/04.ajaxPostData.php");
        ajaxObj.send();
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                console.log(ajaxObj.responseText);
                
            }
        }




    }
    btnArr[1].onclick=function () {
        var ajaxObj=new XMLHttpRequest();
//        ajaxObj.open("get","php/03.ajaxGetData.php?username=mingzhao&password=123456");
        var name=username.value;
        var pwd=password.value;
        ajaxObj.open("get","php/03.ajaxGetData.php?username="+name+"&password="+pwd);
        ajaxObj.send();
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState==4 && ajaxObj.status==200){
                console.log(ajaxObj.responseText);
                
            }
        }


    }

    btnArr[2].onclick=function () {
        var name=username.value;
        var pwd=password.value;


        var ajaxObj=new XMLHttpRequest();
        ajaxObj.open("post","php/04.ajaxPostData.php");
        ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajaxObj.send("username="+name+"&password="+pwd);
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState==4 && ajaxObj.status==200){
                console.log(ajaxObj.responseText);

            }
        }

    }




</script>

获取明星头像案例

php代码

<?php
    header('Content-type:text/html;charset=utf-8');
    $starname=$_GET["starname"];

    switch($starname){
        case "赵丽颖":
            echo "http://static.yufenghen.cn/starimg/liying.jpg";
            break;
        case "杨颖":
            echo "http://static.yufenghen.cn/starimg/baby.jpg";
            break;
        case "杨幂":
            echo "http://static.yufenghen.cn/starimg/mi.jpg";
            break;

    };

?>

html代码

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid #e4393c;
            margin: 50px auto;
            /*background: url("http://static.yufenghen.cn/starimg/liying.jpg") no-repeat center/cover;*/
            background-repeat: no-repeat;
            background-position: center;
            background-size:cover;
        }
        P{
            text-align: center;
        }



    </style>
</head>
<body>
<div id="box">
    
</div>
<p>
    <button>赵丽颖</button>
    <button>杨颖</button>
    <button>杨幂</button>
    
</p>
<script>
        var btnArr=document.getElementsByTagName("button");
        var box=document.getElementById("box");
        for(var i=0;i<btnArr.length;i++){
            btnArr[i].onclick=function () {
                var ajaxObj=new XMLHttpRequest();
                ajaxObj.open("get","php/05.getStarHead.php?starname="+this.innerHTML);
                ajaxObj.send();
                ajaxObj.onreadystatechange=function () {
                    if(ajaxObj.readyState==4 && ajaxObj.status==200){
//                        console.log(ajaxObj.responseText);
                        box.style.backgroundImage="url('"+ajaxObj.responseText+"')";

                    }
                }
            }
        }





</script>


</body>
</html>

获取明星头像案例（xml格式）

我们通过观察浏览器的network发现

本次请求虽然数据请求到了但是ajaxObj.responseXML返回的却是null

因为 response Header (响应头) 里面的Content-type是 text/html

这样表示告诉前端浏览器接收到的是一个html文本

所以ajax的responseXML无法解析就返回null

所以我们应该让服务器吧 text/html改成xml的标识格式

一旦服务器返回了正确的mime类型的xml数据

那么ajaxObj.responseXML返回的就是跟xml文件数据有关的document对象

有了这个对象我们就可以进行xml数据的解析(dom对象针对标签节点的增删改查)

html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>根据xml数据渲染表格</button>
<table id="tab" >

</table>
<script>
    var tab=document.getElementById("tab");
    var btn=document.getElementsByTagName("button")[0];

    btn.onclick=function () {
        //1.构建对象
        var ajaxObj=new XMLHttpRequest();
        //2.打开连接
        ajaxObj.open("get","php/02.getStarInfoByXML.php");
        //3.发送数据
        ajaxObj.send();
        //4.注册事件
        ajaxObj.onreadystatechange= function () {
            //处理数据
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
              console.log(ajaxObj.responseXML);
//              console.log(document);
                var xmlDOM=ajaxObj.responseXML;
                var starArr=xmlDOM.getElementsByTagName("star");
//                console.log(starArr);
                var str="";
                for(var i=0;i<starArr.length;i++){
                    str+="<tr>";
                    var nameNode=starArr[i].getElementsByTagName("name")[0];
                    var headimgNode=starArr[i].getElementsByTagName("headimg")[0];
                    var desNode=starArr[i].getElementsByTagName("description")[0];

//                    console.log(nameNode.innerHTML+"  "+headimgNode.innerHTML+"  "+desNode.innerHTML);

                    str+="<td>"+nameNode.innerHTML+"</td>";
                    str+="<td><img width='100' src='"+headimgNode.innerHTML+"'></td>";
                    str+="<td>"+desNode.innerHTML+"</td>";


                    str+="</tr>";
                }
//                console.log(str);
                tab.innerHTML=str;
            }
        }
    }




</script>

</body>
</html>

php

<?php
                      //text/html 这个类型有一个学名:  MIME类型
                      //所谓MIME类型是指  前后端交互时 互相沟通文件数据类型的一个标识
                      //MIME类型不是瞎写的  而是有一套固定的 MIME类型表
        //MIME类型要跟返回的数据保持一致  这样前端的 responseXML才能解析
//    header('Content-type:text/html;charset=utf-8');
    header('Content-type:application/xml;charset=utf-8');

    echo  file_get_contents("data/star.xml");
?>

获取明星头像案例（json格式）

json格式

//最外层是[] 的表示当前json里面的数据是一个数组类型

//最外层是{} 的表示当前json里面的数据是一个对象类型

html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>根据json数据渲染表格</button>
<table id="tab" >

</table>
<script>
    var tab=document.getElementById("tab");
    var btn=document.getElementsByTagName("button")[0];


    btn.onclick=function () {
        //1.构建对象
        var ajaxObj=new XMLHttpRequest();
        //2.打开连接
        ajaxObj.open("get","php/03.getStarInfoByJson.php");
        //3.发送数据
        ajaxObj.send();
        //4.注册事件
        ajaxObj.onreadystatechange= function () {
            //处理数据
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
//              console.log(ajaxObj.responseText);
//              将json字符串转换成json对象
//              console.log(JSON.parse(ajaxObj.responseText));
            var starArr=JSON.parse(ajaxObj.responseText);
            for(var i=0;i<starArr.length;i++){
                var newTr=document.createElement("tr");
                var newTd1=document.createElement("td");
                var newTd2=document.createElement("td");
                var newTd3=document.createElement("td");
                var newTd4=document.createElement("td");
                var newTd5=document.createElement("td");
                newTd1.innerHTML=starArr[i].name;
                newTd2.innerHTML="<img width='100' src='"+starArr[i].headimg+"'>";
                newTd3.innerHTML=starArr[i].des;
                newTd4.innerHTML="<button>编辑</button>"
                newTd5.innerHTML="<button>删除</button>"

                newTr.appendChild(newTd1)
                newTr.appendChild(newTd2)
                newTr.appendChild(newTd3)
                newTr.appendChild(newTd4)
                newTr.appendChild(newTd5)


                tab.appendChild(newTr);
            }



            }
        }
    }


/*ajax_get("get服务器","键1=值1&键2=值2",function () {

})
ajax_post("post服务器","键1=值1&键2=值2",function () {

})
    ajax_all("get服务器","get","键1=值1&键2=值2",function () {

    })
    ajax_all("post服务器","post","键1=值1&键2=值2",function () {

    })
    
    ajax_tools({
        url:"服务器地址",
        type:"请求方式get/post",
        data:"键1=值1&键2=值2",
        success:function () {
            //处理返回数据
        }
        
        
    })

    $.ajax({
        url:"服务器地址",
        type:"请求方式get/post",
        data:"键1=值1&键2=值2",
        success:function () {
            //处理返回数据
        }
    })*/

</script>

</body>
</html>

php

<?php
//    header('Content-type:text/html;charset=utf-8');
    header('Content-type:application/json;charset=utf-8');

    echo file_get_contents("data/star.json");


?>

xml格式的数据和json数据的区别以及优缺点:

xml:

优点:

数据格式古老几乎所有设备都支持

可读性强

缺点:

数据的大小比较大会占传输数据的空间闭合标签表示一个数据

json:

优点:

格式内容比较小几个简单的符号就表示了很复杂的数据

兼容性也是很好因为是字符串嘛使用的最多

现在几乎所有语言都支持json解析

前后端分离开发:

就是前端页面不再嵌套后台语言就是单独的前端页面

数据是通过交互手段进行json和xml数据格式的交互

进行页面渲染

get方法的封装

参数配置:

1.服务器地址(字符串)

2.参数字符串(键=值&键=值)

3.回调函数(数据成功返回的方法)

html

<script>
    var btnArr=document.getElementsByTagName("button");

    btnArr[0].onclick=function () {
        /*ajax_get("php/04.getServer.php",null,function (res) {
            console.log(res.responseText);
            
        })*/

        ajax_get("php/04.getServer.php","username=小强&password=123456",function (res) {
            console.log(res.responseText);

        })


    }


    function ajax_get(url,data,callback) {

        var ajaxObj=new XMLHttpRequest();
//        如果有需要提交的参数 再拼接
        if(data){
            url=url+"?"+data;
        }
        ajaxObj.open("get",url);
        ajaxObj.send();
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof callback=="function"){
                    callback(ajaxObj)

                }
            }
            /*
                以下是可以针对所有可能出现的错误返回进行分别不同的处理
            else if(ajaxObj.readyState===4 && ajaxObj.status===404){
                if(typeof error=="function"){
                    error(ajaxObj)

                }
            }

            else if(ajaxObj.readyState===4 && ajaxObj.status===500){
                if(typeof qq=="function"){
                    qq(ajaxObj)

                }
            }
            else if(ajaxObj.readyState===3 && ajaxObj.status===200){
                if(typeof ww=="function"){
                    ww(ajaxObj)

                }
            }*/
        }
        
    }
//    ajax_get("地址","username=xx&password=123456")
//    ajax_get("地址",null)

    
    
</script>

php

<?php
    header('Content-type:text/html;charset=utf-8');
    $name=$_GET["username"];
    $pwd=$_GET["password"];

    echo "我是服务器get数据,你get到了么?---->$name ----$pwd";
?>

ajax_post封装

* 参数配置:

* 1.url地址

* 2.data参数

* 3.回调函数

html

function ajax_post(url,data,callback) {
        if(!url){
//            如果没有url地址  则无法请求
            return;

        }
        var ajaxObj=new XMLHttpRequest();
        ajaxObj.open("post",url);
        ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        if(data){
//            如果有参数就发送
            ajaxObj.send(data);
        }else{
//            没有就不传入参数
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange= function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                    if(typeof callback=="function"){
                        callback(ajaxObj)

                    }
            }
        }


    }

php

<?php
    header('Content-type:text/html;charset=utf-8');


    $name=$_POST["username"];
    $pwd=$_POST["password"];

    echo "我是服务器post数据,你post到了么?--->$name ----$pwd";

?>

ajax_all方法的封装

参数配置:

1.url 服务器地址

2.method请求方式(get/post)

3.data参数

4.回调函数

html

function ajax_all(url,method,data,callback) {
        if(!url){
            return;
        }

        var ajaxObj=new XMLHttpRequest();

        if(method && method.toUpperCase()=="POST"){
//            匹配到这 只有这么几个值:  post  POST  Post poSt....

            ajaxObj.open(method,url);
            ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            if(data){
                ajaxObj.send(data);
            }else{
                ajaxObj.send();
            }


        }else{
//            其他一切情况 直接暴力的 把它该成  get方式
            method="get";
            if(data){
                url=url+"?"+data;

            }
            ajaxObj.open(method,url);
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof callback=="function"){
                    callback(ajaxObj);

                }

            }
        }

    }

php

<?php
    header('Content-type:text/html;charset=utf-8');
   $name=$_POST["username"];
    $pwd=$_POST["password"];


  /*$name=$_GET["username"];
    $pwd=$_GET["password"];*/
    echo "我是服务器数据,你是get还是post来的?---->$name   -----$pwd";
//    echo "我是服务器数据,你是get还是post来的?";

?>

ajax_tools封装

* 参数配置:

* settings:对象

* 对象包含属性: url

* type(GET/POST)

* data

* success

function ajax_tools(settings) {
        if(!settings.url){
            return;
        }

        var ajaxObj=new XMLHttpRequest();

        if(settings.type && settings.type.toUpperCase()=="POST"){
//            匹配到这 只有这么几个值:  post  POST  Post poSt....

            ajaxObj.open(settings.type,settings.url);
            ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            if(settings.data){
                ajaxObj.send(settings.data);
            }else{
                ajaxObj.send();
            }


        }else{
//            其他一切情况 直接暴力的 把它该成  get方式
            settings.type="get";
            if(settings.data){
                settings.url=settings.url+"?"+settings.data;

            }
            ajaxObj.open(settings.type,settings.url);
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof settings.success=="function"){
                    settings.success(ajaxObj);

                }

            }
        }


    }

php

<?php
    header('Content-type:text/html;charset=utf-8');
   $name=$_POST["username"];
    $pwd=$_POST["password"];


  /*$name=$_GET["username"];
    $pwd=$_GET["password"];*/
    echo "我是服务器数据,你是get还是post来的?---->$name   -----$pwd";
//    echo "我是服务器数据,你是get还是post来的?";

?>

Web前端-JavaScript--ajaxajax

ajax

AJAX的五步骤:

ajax兼容性写法

get请求和post请求的区别:

获取明星头像案例（xml格式）

获取明星头像案例（json格式）

get方法的封装

ajax_post封装

ajax_all方法的封装

ajax_tools封装

继续阅读

Jeecg-Boot 2.4.0版部署后无法加载验证码问题Provisional headers are shown Failed to load response data

jQuery实现Ajax通讯的几种常用方式

SpringMVC 与 Json实现数据交互

Spring MVC+Ajax创建实例

jquery,ajax,jsonp例子+springmvc后台

SpringMVC(六) | 前后端交互之ajax与jsonjsonajax

SpringMVC之ajax异步交互

SpringMvc与前端交互的数据转递（ajax）一、text类型数据二、json类型数据

PHP基础入门，简单实现前端后端交互<?php?>、echo变量及区分单双引号创建数组、echo、print_r()、var_dump()区别二维数组常见数据类型及调用函数自定义函数http协议常用请求方式及在php中的用法网页和服务器简单交互案例

jqGrid的使用笔记：5. 事件

JSON的三种解析方式JSON的三种解析方式一、什么是JSON？二、JSON解析之传统的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON总结：

django短信验证码的后端实现

聊一聊Swagger-UI的那些事情软件简介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的升级版的UI

javascript console对象解读

前后端分离之跨域问题

JavaScript的那些坑之事件代理事件代理事件阶段