JavaScript之Ajax（十一）

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量402 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript ajax servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/twjtwjtwjm/article/details/131026454
版权

JavaScript之Ajax

Ajax ==> Asynchronous JavaScript And XML (异步的 JavaScript 和 XML)。
 
Ajax是一种页面(局部)刷新技术，它是异步执行的，也就是说，要通过回调函数获得响应。

1、XMLHttpRequest 对象

用于在后台与服务器交换数据，不同的浏览器创建该对象的方式有差异，主流浏览器均内建该对象，创建方式如下：
 

var xhr;
if (window.XMLHttpRequest){
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
} else{
 // IE6, IE5 浏览器执行代码
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2、XMLHttpRequest 请求与响应

2.1、请求
/*
规定请求的类型、URL 以及是否异步处理请求。
*/
xhr.open("GET","ajax_info.txt",true);
// 如果请求的类型为 post，则要使用 setRequestHeader() 来添加 HTTP头。
xhr.open("POST","AjaxServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
发送请求到服务器端，如不需发送数据，则使用null。
*/
xhr.send(null);
xhr.send("userName="+userName);
2.2、响应
xhr.responseText //获得字符串形式的响应数据
xhr.responseXML //获得 XML 形式的响应数据
xhr.status //响应的状态码：200,302,404,500 
xhr.statusTextHTTP //状态的说明
xhr.readyState //检测响应状态，值：0-4
/*
0：请求未初始化  
1：服务器连接已建立   
2：请求已接收
3：请求处理中      
4：请求已完成，且响应已就绪
当响应状态为4时，才使用responseText或responseXML从 xhr 对象中获取服务端响应给客户端的数据
*/
xhr.onreadystatechange //响应状态改变事件，每当 readyState 属性改变时，就会调用该函数。

3、七大步骤

1、实例化异步请求对象
 

//定义一个全局的XMLHttpRequest对象
let xhr;
if(window.XMLHttpRequest){
 //针对IE7以上，FireFox,Chrome,Opera等。。。
 xhr=new XMLHttpRequest();
}else {
 //针对IE5,IE6
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2、给异步请求对象注册回调函数
 

xhr.onreadystatechange=mycallback; //也可直接绑定匿名函数

3、设置请求信息
 

//A：Get方式代码
xhr.open("GET","AjaxServlet?text="+text,true);

//B：Post方式代码：需要设置Http的请求头
xhr.open("POST","AjaxServlet",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4、发送请求到服务器端
 

//A：已经在请求url的后方已经附加了数据，或没有数据要发送
xhr.send(null);

//B：单独发送数据
xhr.send("userName="+userName);

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

function mycallback(){
// 判断异步对象的状态
if(xhr.readyState == 4) {
 // 判断交互是否成功
 if(xhr.status == 200) {
   // 获取服务器响应的数据
   let res = xhr.responseText; // 或xmlHttp.responseXML;
   // 将数据更新到HTML页面中，实现页面的局部刷新
   res = JSON.parse(res);
   document.getElementById("text").innerHTML=msg;
 }
}
}

注意： 这些例子只是演示一下，并不一定是这样的，Ajax 的应用场景是灵活多变的，可以读取xml文件，json文件，发送 head 请求，接收服务器端返回的数据，接收数据库返回的数据，用户信息验证等等…


4、页面局部刷新实例

<body>
    <button onclick="validateUser()">点击修改输入框的值</button>
    <input type="text" value="666" id="text" />
    <script>
        //定义一个全局的XMLHttpRequest对象
        let xhr;
        //点击按钮修改输入框内容的函数
        function validateUser() {
            if (window.XMLHttpRequest) { // 1、创建xhr对象实例
                //针对IE7以上，FireFox,Chrome,Opera等。。。
                xmlHttp = new XMLHttpRequest();
            } else {
                //针对IE5,IE6
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange = mycallback; // 2、注册回调函数

            xhr.open("GET", "AjaxServlet", true); // 3、设置请求信息
            xhr.send(null); // 4、发送请求到服务器端
        }
        //5、执行回调函数，根据不同的响应状态进行处理
        function mycallback() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let msg = xhr.responseText; //得到响应数据
                document.getElementById("text").value = msg; //更新刷新页面数据
            }
        }
    </script>
</body>

5、读取xml文件

<body>
<button onclick="loadXMLDoc()" >获取我的CD</button>
<table id="demo"></table>

<script>
    function loadXMLDoc() {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                myFunction(this);
            }
        };
        xhttp.open("GET", "cd.xml", true);
        xhttp.send();
    }
    function myFunction(xml) {
        let i;
        let xmlDoc = xml.responseXML;
        let table="<tr><th>Artist</th><th>Title</th></tr>";
        let x = xmlDoc.getElementsByTagName("CD");
        for (i = 0; i <x.length; i++) {
            table += "<tr><td>" +
                x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
                "</td><td>" +
                x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
                "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }
</script>
</body>
上一篇文章下一篇文章
JavaScript之事件（十）JavaScript之JSON（十二）
已进厂(。•́︿•̀。)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】Ajax
南栀的博客
12-17 3590
Ajax
JavaScript-Ajax基础讲解
OuYyds的博客
04-16 1913
ajax概述： ajax全称：异步的JavaScript和xml，他是用于发送http请求（支持异步请求） ajax的特点： 1.支持异步请求 2.实现局部刷新 3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录） ajax运用： 前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据 1.创建一个请求对象 request 请求 response 响应 let xhr = new
JavaScript实现ajax
weixin_41198447的博客
07-27 1591
实现ajax请求
JavaScript之Ajax-axios表单提交
AK Zzz的博客
11-17 5784
JavaScript的Ajax-axios表单提交,头像上传,图书管理,可能会有你想看的知识点......
JavaScript之promise对象及ajax的使用
weixin_44827643的博客
07-19 1352
本文主要介绍JavaScript中的promise对象、ajax请求数据、json数据格式以及如何利用promise封装ajax.
十三、JavaScript ajax请求
拾荒人博客
10-13 2034
1.什么事ajax Asynchronous JavaScript and xml （异步JavaScript和XML） 主要作用是用来处理前后端数据传输 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScrip.
JavaScript的Ajax
ITjun666的博客
10-31 5220
JavaScript的Ajax是实现浏览器与服务器的通信交互技术,可以访问服务器的局部刷新!
使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求示例
allway2的博客
03-18 3554
这篇文章解释了 Ajax 的基础知识以及如何使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求。 Ajax（异步 Javascript 和 XML）是一种我们可以在 Web 开发中使用的技术，用于创建更快的用户界面更新和更好的用户体验。Ajax 使用 XMLHttpRequest 对象与服务器进行通信。使用 ajax，用户可以在不提交页面或重新加载浏览器页面的情况下将数据发布到后端服务器。使用 servlet 创建 AJAX 示例应用程序非常简单。 在这篇文章
JAVA 之 Ajax
qq_53312143的博客
11-01 1万+
Java Ajax 异步交互
JavaScript之Ajax（一篇入门Ajax就够了）
热门推荐
weixin_50602266的博客
12-20 7万+
Ajax入门一篇就够
轻松理解JavaScript之AJAX
10-20
本文主要介绍了JavaScript中的AJAX的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
javascript之AJAX框架使用说明
10-29
javascript之AJAX框架使用说明,需要的朋友可以参考下.`
JavaScript AJAX之惰性载入函数
10-25
主要介绍了JavaScript AJAX之惰性载入函数,惰性载入表示函数执行的分支仅会发生1次,是种JS的优化技巧,需要的朋友可以参考下
原生JavaScript实现Ajax的方法
10-22
主要介绍了原生JavaScript实现Ajax的几种方法，感兴趣的小伙伴们可以参考一下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 406
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 570
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1441
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1285
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1078
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
javascript发送ajax请求
06-28
### 回答1： JavaScript可以使用XMLHttpRequest对象发送AJAX请求。以下是一个简单的示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); ``` 这个例子使用GET方法向http://example.com/api/data发送请求，并在响应成功后将响应数据解析为JSON格式并打印到控制台。在实际应用中，可以根据需要使用不同的HTTP方法和请求参数。 ### 回答2： JavaScript是一种能够让网页实现更加动态和交互性的编程语言，可以通过Ajax（异步JavaScript与XML）发送请求，实现网页的动态加载和无需刷新页面更新数据，这对于提升用户体验非常有帮助。 发送Ajax请求有四个步骤： 1.创建XMLHttpRequest对象 首先要创建一个XMLHttpRequest对象，该对象可以利用JavaScript与服务器进行通信，并且不需刷新整个页面。 2.设置请求参数 设置请求对象的详细信息，例如请求的URL地址、请求方式以及请求的数据等等。 3.绑定回调函数 利用回调函数定义一个处理服务器响应的函数，这是Ajax操作唯一不同的部分。 4.发送请求 利用send()函数发送Ajax请求，并等待服务器响应。 代码示例： let xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象 xhr.open('GET', 'http://example.com/api/data', true); // 设置请求参数 xhr.onreadystatechange = function() { // 绑定回调函数 if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 处理服务器响应 console.log(xhr.responseText); } }; xhr.send(); // 发送请求 通过上述步骤，我们可以成功发送Ajax请求并获取到服务器的响应数据。这是一种优秀的提升用户体验的方式，它可以大大减少页面刷新的时间，避免页面重载导致用户体验差。在现在的Web开发中，Ajax请求已经成为非常常见的一种方式，能够帮助我们更好地构建动态、实时、高效的Web应用程序。 ### 回答3： JavaScript 可以通过 XMLHttpRequest（XHR）对象来发送 AJAX 请求。XHR 是一种在后台与服务器交换数据的技术，无需刷新整个页面的情况下更新部分网页内容。XHR 对象可以根据服务器返回的数据更新页面，并在后台执行其他任务，而不影响当前的页面。 实现 AJAX 请求的过程一般如下： 1.创建 XMLHttpRequest 对象 在 JavaScript 中，通过 XMLHttpRequest 对象来发送 AJAX 请求。可以使用以下语法创建 XMLHttpRequest 对象： var xhttp = new XMLHttpRequest(); 2.创建请求 在 JavaScript 中，可以使用以下参数来指定 AJAX 请求： - 请求的方法，例如 GET 或 POST。 - 请求的 URL。 - 是否使用异步请求。异步请求不会阻塞页面，而同步请求会阻塞页面。 - 可选的用户凭证等信息。 例如，以下代码创建一个 GET 请求： xhttp.open("GET", "example.php", true); xhttp.send(); 3.发送请求 使用 XHR 对象的 send() 方法发送请求，如下所示： xhttp.send(); 尽管 send() 函数不接收任何参数，但可以在 send() 函数执行之前或执行期间用 setRequestHeader() 方法设置请求标题。 4.处理响应 XHR 对象的 onreadystatechange 事件监听器可以捕获从服务器返回的响应。 以下是一些示例语句，可用于访问服务器响应： - xhr.responseText：包含作为字符串的响应的文本。 - xhr.readyState：说明请求/响应过程的当前状态。 - xhr.status: 包含 HTTP 服务器的响应状态代码。 以下是一个处理响应的示例： xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; 在此示例中，当 readyState 等于 4 并且状态等于 200 时，处理代码将响应作为文本传递到页面中具有 ID“demo”的元素。 综上所述，通过 JavaScript 发送 AJAX 请求需要创建 XHR 对象，指定请求，发送请求并处理响应。这种技术使得页面加载更快，更高效，并提高了用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值