AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

jcsyl_mshot

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jcsyl_mshot/article/details/81487622

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了AJAX技术的基本概念及其在网页开发中的应用。通过后台与服务器进行少量数据交换，实现网页的异步更新，提高用户体验。文章还提供了使用原生JavaScript及jQuery实现AJAX请求的具体示例。

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

AJAX 是异步的JavaScript 和 XML. 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。

<button type="submit" onclick="loadXMLDoc()">change </button>
<script>
function loadXMLDoc()
{
  AJAX 执行
}
</script>

XMLHttpRequest 是Ajax的基础,XMLHttpRequest 对象用于和服务器交换数据,如需将请求发送到服务器，使用XMLHttpRequest对象的open() 和 send() 方法。

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//open(method,url,async) method 是请求的类型，url 是文件在服务器上的位置 async true为异步，false 是同步。
//send(string)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","/try/ajax/demo_post.php",true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

jQuery Ajax

jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求, ajax(url, settings)函数需要接收一个URL和一个可选的settings对象.常用选项如下:

async：是否异步执行AJAX请求，默认为true，千万不要指定为false；
method：发送的Method，缺省为’GET’，可指定为’POST’、’PUT’等；
contentType：发送POST请求的格式，默认值为’application/x-www-form- - - urlencoded; charset=UTF-8’，也可以指定为text/plain、application/json；
data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；
headers：发送的额外的HTTP头，必须是一个object；
dataType：接收的数据格式，可以指定为’html’、’xml’、’json’、’text’等，缺省情况下根据响应的Content-Type猜测。

var jqxhr = $.ajax('/wkn',{
    dataType:'json'
});