学习笔记：Ajax原理

最新推荐文章于 2024-07-21 17:13:47 发布

Leo_长颈鹿

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量140

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_40664264/article/details/79120916

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Ajax

简单来说：

1.同步：客户端向服务器发送请求的之后，必须等服务器响应之后，才能进行下一步操作。

2.异步：客户端向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。

二、Ajax简介：

Ajax的全称是Asynchronous JavaScript+XML。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。

三、实现Ajax的五个基本步骤：

1.创建XMLHttpRequest对象；

2.设置回调函数；

3.使用open方法启动一个请求以备发送；

4.使用send方法向服务端发送数据；

5.在回调函数中针对不同的响应状态进行处理

具体步骤如下：

（1）创建 XMLHttpRequest对象：

XMLHttpRequest对象用来在浏览器与服务器之间传送数据：

   var xmlhttp;
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest;
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP";)
        }

（2）设置回调函数：

xmlHttp.onreadystatechange= callback;
        function callback(){}

（3）使用post方法启动一个请求以备发送：

xmlhttp.open("get","example.txt",false);

open()接受3个参数：要发送的请求的类型（如“GET”或者“POST”等）、请求的URL、表示是否异步发送请求的布尔值。

（4）使用send方法向服务端发送数据：

xmlhttp.send(null);

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。调用send()之后，请求就会被分派服务器。

（5）在回调函数中针对不同的响应状态进行处理

xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("div").innerHTML = xmlhttp.responseText;
            }
        }

四、完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example</title>
</head>
<body>
    <div id="div"></div>
    <script>
        var xmlhttp;
        if(window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest;
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP";)
        }
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("div").innerHTML = xmlhttp.responseText;
            }
        }
    </script>
</body>
</html>

Leo_长颈鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：Ajax原理

一、Ajax 简单来说： 1.同步：客户端向服务器发送请求的之后，必须等服务器响应之后，才能进行下一步操作。 2.异步：客户端向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。二、Ajax简介： Ajax的全称是Asynchronous JavaScript+XML。这一技术能够向服务器请求额外的数据而无须卸载页
复制链接

扫一扫

专栏目录