ajax入门篇

最新推荐文章于 2024-11-16 15:31:37 发布

锋君

最新推荐文章于 2024-11-16 15:31:37 发布

阅读量207

点赞数

文章标签： html javascript java

本文链接：https://blog.youkuaiyun.com/xiuyuandashen/article/details/104336556

版权

本文深入解析AJAX（异步的JavaScript与XML技术）的工作原理及其优势。AJAX通过仅向服务器请求必要的数据并在客户端处理，有效减少服务器负载，提升用户界面响应速度。文章还提供了XMLHttpRequest对象的使用示例，展示了如何实现局部数据交互而不刷新整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是ajax

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出[1]。

传统的Web应用允许用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。虽然其名称包含XML，但实际上数据格式可以由JSON代替，进一步减少数据量，形成所谓的AJAJ。而客户端与服务器也并不需要异步。一些基于AJAX的“派生／合成”式（derivative/composite）的技术也正在出现，如AFLAX

--------来自维基百科

XMLHttpRequest对象

创建XMLHttpRequest对象
```
 var httpRequest=new XMLHttpRequest();
```
XMLHttpResquest对象的一些方法

方法或属性	作用
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求
	请求的类型：GET或者POST
	url：请求的文件在文件在服务器上的位置
	async：true或者false，代表着异步或者同步
send(String )	将请求发送到服务器
	String：仅用于 POST 请求
setRequestHeader(header,value)	使用POST来提交信息要添加 HTTP 头
	header：规定头的名称
	value：规定头的值
responseText	获得字符串形式的响应数据
responseXML	获得 XML 形式的响应数据
onreadystatechange 事件	请求状态改变的事件触发器大概指的是回调函数
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status	200: “OK” ，404：未找到页面

readyState

请求未初始化
服务器连接已建立
请求已接收
请求处理中
请求已完成，且响应已就绪

随手案例

目录
在这里插入图片描述
index.jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>ajax</title>
  </head>
  <body>
  用户名：
  <input type="text" id="username">
  <input type="submit" value="验证用户名" onclick="checkUsername()">
  <div id="B">

  </div>
  </body>
<script type="text/javascript">
  var httpRequest;
  function checkUsername() {
    if (window.XMLHttpRequest) {
      httpRequest = new XMLHttpRequest();
    }

    var name = document.getElementById("username").value;
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        var text = httpRequest.responseText;
        var div = document.getElementById("B");
      if(name==text){
        div.innerText = text;
      }else {
        div.innerText="用户名有误";
      }


      }//指定回调函数
    }
    httpRequest.open("post", "http://localhost:8080/ajaxtest_war_exploded//test.txt", true);
    httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//请求头
    httpRequest.send("username=" + name);

  }
  
  
</script>
</html>