Ajax总结

一、Ajax概述

1．什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

2．Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1 功能。

二、js原生的Ajax技术（了解）

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1）创建Ajax引擎对象

2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）

3）绑定提交地址

4）发送请求

5）接受响应数据

//异步get提交
function f1(){
        //1）创建Ajax引擎对象
        var xmlhttp=new XMLHttpRequest();
        //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
        xmlhttp.onreadystatechange=function(){
            //5）接受响应数据
            var res=xmlhttp.responseText;
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                document.getElementById("span1").innerHTML=res;
                
            }
        }
        //3）绑定提交地址(请求方式、请求地址、是否异步)
        xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", true)
        //4）发送请求
        xmlhttp.send();
        
    }

//异步post提交
    function f2(){
        //1）创建Ajax引擎对象
        var xmlhttp=new XMLHttpRequest();
        //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
        xmlhttp.onreadystatechange=function(){
            //5）接受响应数据
            var res=xmlhttp.responseText;
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                alert(res);
            }
        }
        //3）绑定提交地址(请求方式、请求地址、是否异步)
        xmlhttp.open("POST", "${pageContext.request.contextPath}/AjaxServlet", true)    //true(异步) false（同步）
        //4）发送请求
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("name=shangsan");
    }

    //同步get提交
    function f3(){
        //1）创建Ajax引擎对象
        var xmlhttp=new XMLHttpRequest();
        //2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
        xmlhttp.onreadystatechange=function(){
            //5）接受响应数据
            var res=xmlhttp.responseText;
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                document.getElementById("span2").innerHTML=res;
            }
        }
        //3）绑定提交地址(请求方式、请求地址、是否异步)
        xmlhttp.open("GET", "${pageContext.request.contextPath}/AjaxServlet", false)
        //4）发送请求
        xmlhttp.send();
    }

总结：同步页面上不能在进行别的操作

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

例子：网页的验证登陆（防止自动刷新）

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

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

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

实例：

修改内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

三、jquery的Ajax技术

1.get方式提交

function f1(){
        $.get("${pageContext.request.contextPath }/Ajax2Servlet",   //绑定提交地址
                {"name":"zhangsan","age":18},                       //提交数据
                function(data){                                     //回调函数--接收相应数据（data）
                alert(data.name);
            },
            "json")
    }

2.post方式提交

function f2(){
        $.post("${pageContext.request.contextPath }/Ajax2Servlet",
                {"name":"zhangsan","age":18},
                function(data){
                alert(data.name);
            },
            "json")
    }

3.ajax方式

function f3(){
        $.ajax({
            url:"${pageContext.request.contextPath }/Ajax2Servlet",
            async:true,
            type:"POST",
            data:{"name":"lucy","age":18},
            success:function(date){
                alert(date.name);
            },
            error:function(){
                alert("请求失败");
            },
            dataType:"json"
        })
    }