Ajax技术与JQuery Ajax

su-shen

码龄6年

关注

原创最新推荐文章于 2025-11-11 09:48:58 发布 1k 阅读

Ajax是什么以及Ajax交互原理（详，图文并茂，原理篇）本博，以图文并茂的方式，详细讲解了Ajax技术是什么，以及他的传输原理阅读详情

什么是Ajax技术

Ajax简介

Ajax是一种异步的javaScript和xml技术。
Ajax是一种通俗来说就是一种无需重新载入整个界面，就能够更新页面部分数据的技术。
使用Ajax技术的页面，通过与后台的少量的数据交换，就可以实现异步的页面的局部更新。
总结：Ajax就是一个在不刷新页面的情况下可以发送和接收后端数据的一种技术。

同步和异步

同步：更新前台的数据时，不论数据多少，都重新载入整个页面，很耗时。
异步：只更新在前台想要更新的数据，不影响别的数据。

Ajax与Http请求

HTTP是一种应用进程与服务器之间连接的协议，无状态协议每一次请求都需要重新建立连接。
Http请求过程
- 建立TCP连接
- Web浏览器向Web服务器发送请求命令
- Web浏览器发送请求头信息
- Web服务器应答
- Web服务器发送应答头信息
- Web服务器向浏览器发送数据
Http状态码
- 1XX：信息类，表示收到Web浏览器请求，正在进一步处理中
- 2XX:成功，表示用户请求被正确接收，如200
- 3XX:重定向，表示请求没有成功，客户必须采取进一步动作
- 4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found。
- 5XX:服务器错误，表示服务器不能完成对请求的处理，如：500

JQuery的Ajax实现

原生的Ajax，繁琐，难以理解，这里只讲述JQuery的Ajax的实现
JQuery的Ajax的实例

$.ajax({
    url: "http://127.0.0.1:8000/", // 发送的路径
    type: "post", // 发送方式
    contentType:'application/json',  // 声明发送数据格式
    data:JSON.stringify({"name":"Yunya","age":18}), // 发送的数据，注意，这里一定要序列化，因为已经声明了。
    //请求成功，调用的方法
    success : function(result) {
    console.log(result);
    },
    //请求失败，调用的方法
    error : function(e){
    console.log(e.status);
    console.log(e.responseText);
    }
})

load（）方法

load( url , [data] , [callback] )
实例：
实现将xi.html的内容加载到id为cont的p标签上
首先构建一个被load（）方法加载并追加到HTML文件，名字为xi.html，html代码如下：

<ul>
    <li>《慢慢来，一切都来得及》</li>
    <li>《你的孤独虽败犹荣》</li>
    <li>《你只是看上去很努力》</li>
    <li>《JavaScript从入门到放弃》</li>
</ul>
<div>你筛选出来的元素</div>

然后再新建一个空白页面，用来追加的HTML内容，HTML代码如下：

<h3>你最喜欢读什么书？</h3>
<p id="cont"></p>
<button>点击</button>

接下来就是编写Jquery代码了，等DOM加载完毕之后，通过单击按钮来调用load（）方法，然后将xi.html的内容加载到id=“cont”的元素里。


$("button").click(function(){
    $("#cont").load("xi.html li");
})

$.get()和 $.post()方法

load（）通常是从web服务器上获取静态的数据文件，如果需要专递一些参数给服务器中的页面，可以使用 $. g e t () 方法和$ .post（）方法（或$.ajax()方法）
实例：

<p><h3>评论</h3></p>
<p>姓名:<input type="text" name="" id="name"></p>
<p>内容:<textarea id="cont"></textarea></p>
<button>发表留言</button>
<hr>
<h3>已有评论</h3>
<div id="msg"></div>

在这里插入图片描述


$("button").click(function(){
$.get("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},function(data,textStatus,fn){
        if(textStatus=="success"){
            $(data).appendTo("#msg")
        }
    },
    "html"
    );
})