Ajax基本原理与实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了Ajax基本原理与实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

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

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

AJAX运行环境：浏览器

AJAX技术早就出现了，2005年google suggest项目采用Ajax技术，页面展示非常丰富效果，用户感受非常良好，使Ajax技术一夜爆红，到现在都是web开发中必不可少的技术之一！

1、关于同步和异步：客户端和服务器端相互通信的基础上
异步传输是面向字符的传输，它的单位是字符；
而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

2、Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 Ajax请求，其实就是利用浏览器内核模拟表单提交，达到页面不刷新的效果，接收服务器的响应，实现局部更新。

Ajax基本原理与实现

3、Ajax请求：

XMLHttpRequest：Ajax对象的核心（代表浏览器内核）

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

<script>
    var xmlhttp;
    function init() {
        if (window.XMLHttpRequest){
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码；创建XMLHttpRequest对象
            xmlhttp=XMLHttpRequest;
        }
        else{
            // IE6, IE5 浏览器执行代码；不存在，使用ActiveXObject
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
    }
</script>

向服务器发送请求：将请求发送到服务器，主要使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1、open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理；

2、send() 方法将请求送往服务器。

xmlhttp.open("GET","/jquery/ajaxServlet",true);
xmlhttp.send();

GET OR POST：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，但是在有些情况下，必须使用 POST 请求；【 Ajax请求，只能提交文本字符，所以像上传内容等功能，必须通过表单post提交】

function doGet(){
    xmlhttp.open("GET","/jquery/ajaxServlet",true);//未提交数据
    xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，异步
    xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，同步
    xmlhttp.send();
}
function doPost() {
    xmlhttp.open("Post","/jquery/ajaxServlet",true);//未提交数据
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//已提交数据
    xmlhttp.send("fname=向&lname=洋");//上传文本字符；send(String)仅针对post请求，用来传递数据
}

4、Ajax响应

responseText：获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax基本原理与实现

5、Ajax事件

onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当监听到ajax对象的readyState 值改变的行为时，就会触发 onreadystatechange 事件，eadyState 属性存有 XMLHttpRequest 的状态信息，下面是 XMLHttpRequest 对象的三个重要的属性：

Ajax基本原理与实现

ajax 状态码 - xhr.readyState：是用来表示一个 ajax 请求的全部过程中的某一个状态，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据。

onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function() {
    // alert(xmlhttp.readyState);
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // alert(xmlhttp.responseText);
        document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
    }
};

7、jquery Ajax：与Ajax本质没有任何区别。知识换了jquery语法进行了封装，便于使用

Jquery底层ajax实现。

原生JS实现：

<script>
    var xmlhttp;
    function init() {
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            //创建XMLHttpRequest对象
            xmlhttp=new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            //不存在，使用ActiveXObject
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //提交表单，页面不会有刷一下，用户感受提升
    //get方法通过?的方式传递数据，执行参数
    function doGet(){
        // xmlhttp.open("GET","/jquery/ajaxServlet",true);
        xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//异步请求
        // xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",false);
        //状态变化注册
        xmlhttp.onreadystatechange=function() {
            // alert(xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                // alert(xmlhttp.responseText);
                document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
            }
        };

        xmlhttp.send();
        // alert(xmlhttp.responseText);
    }
    function doPost() {
        xmlhttp.open("Post","/jquery/ajaxServlet",true);
        // xmlhttp.open("Post","/jquery/ajaxServlet",false);//false代表同步请求，一般不太使用，效率太低
        //异步请求：send将数据传输给浏览器，浏览器还没返回响应，主程序已经在执行下一句了，导致responseText为null
        //同步请求：send将数据传输给浏览器，浏览器返回响应后，主程序获取responseText的数据展示；一般不太使用，效率太低
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//内容上传文本字符
        //状态变化注册
        xmlhttp.onreadystatechange=function() {
            // alert(xmlhttp.readyState);
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                // alert(xmlhttp.responseText);
                document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新
            }
        }
        xmlhttp.send("fname=向&lname=洋");//send(String)仅针对post请求，用来传递数据
        // alert(xmlhttp.responseText);

    }
</script>

jQuery实现：

1、$.ajax()

        $("#jqueryAjax").click(function () {
            $.ajax({
                type: "get",
                url: "/jquery/ajaxServlet",
                data: "fname=John&lname=Boston",
                success: function(msg){
                    alert( "Data Saved:::: " + msg );
                }
            });
        });

2、$.get()：发送get请求(ajax的简化)

语法：$.get(url, [data], [callback], [type])

        $("#jqueryGet").click(function () {
            $.get("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },
                function(data){
                    alert("Data Loaded: " + data);
                });
        });

3、$.post()：发送post请求(ajax的简化)

语法：$.post(url, [data], [callback], [type])文章来源地址https://www.toymoban.com/news/detail-411294.html

        $("#jqueryPost").click(function () {
            $.post("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },
                function(data){
                    alert("Data Loaded: " + data);
            });
        })

到了这里，关于Ajax基本原理与实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！