Jquery Ajax使用方法

最新推荐文章于 2024-03-13 07:00:00 发布
最新推荐文章于 2024-03-13 07:00:00 发布
阅读量360 收藏
点赞数
分类专栏： web前端文章类 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30481605/article/details/71598580
版权

一个简单的AJAX实例

创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。

<!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("GET","/try/ajax/ajax_info.txt",true);
  xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>

用AJAX加载 XML 文件

创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById('A1').innerHTML=xmlhttp.status;
    document.getElementById('A2').innerHTML=xmlhttp.statusText;
    document.getElementById('A3').innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>

用AJAX进行一次 HEAD 请求

检索资源（文件）的头信息。

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){  document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get header information</button>
</body>
</html>

用AJAX进行一次指定的 HEAD 请求

检索资源（文件）的指定头信息。

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p>
<button onclick="loadXMLDoc('/try/ajax/ajax_info.txt')">Get "Last-Modified" information</button>
</body>
</html>

用AJAX从ASP 文件返回数据

当用户在文本框内键入字符时网页如何与Web服务器进行通信

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
  var xmlhttp;
  if (str.length==0){ 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 
</body>
</html>

用AJAX从数据库返回数据

用AJAX网页如何获取数据库中的信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str){
  var xmlhttp;    
  if (str==""){
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>
</body>
</html>

用AJAX从XML 文件返回数据

创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var 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>
</html>

用callback函数的AJAX实例

用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。

<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else{// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){
  loadXMLDoc("/try/ajax/ajax_info.txt",function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>
oing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JQuery的Ajax方法使用详解
11-30
如下所示： $.ajax的主要参数： url: '_请求的地址', type: 请求类型 get & post data: '请求的参数, success：回调函数 $.ajax({ ... type: 'get', data: 'name=' + $('input...jQuery的一些属性： $('xx').find
防抖函数：多次执行只执行最后一次。setTimeout延时请求操作，适用于input搜索时搜索内容没有完全收集完毕就已经发起了接口请求
前端小白的逆袭
10-17 1418
防抖函数 setTimeout延时请求操作，适用于input内容变化时搜索。如果输入速度过快，可能会出现搜索内容没有完全收集完毕就发起了接口请求，导致搜索结果不准确,前端,setTimeout延时请求操作
Ajax的用法
bankser的博客
03-28 3100
文章目录前言一、Ajax的概念二、实现方式1.$.ajax()2.$.get()3.$.post()总结 前言 ajax是在学习JavaWeb阶段非常重要的内容，是提高用户体验感最重要的技术之一。 一、Ajax的概念   AJAX：ASynchronous JavaScript And XML：异步的JavaScript和XML。   异步和同步：客户端和服务器端互相通信的基础上   同步：客户端必须等待服务器响应。在等待的期间客户端不能做其它操作。   异步：客户端不需要等待服务器端的响应。在服务
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 1004
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
Ajax的基本使用
weixin_67235801的博客
05-04 6151
Ajax的基本使用，无刷新登录，使用Ajax实现搜索自动提示
Ajax详细用法
m0_59812088的博客
11-26 1201
AJAX 是异步的 JavaScript 和 XML简单点说，就是使用对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的 “异步” 特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。Ajax详细介绍axios中文文档使用 Ajax 请求数据的 5 种方式描述POST向服务器新增数据GET从服务器获取数据DELETE删除axios的数据PUTPromise
ajax的使用步骤详解
哈哈
04-07 2288
1、引言 就是异步刷新，AJAX要和XMLHttpRequest对象、JavaScript/DOM、CSS、XML一起使用 2、XMLHttpRequest对象 XMLHttpRequest对象，异步的与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 XMLHttpRequest对象是ajax的基础 语法 var xhr = new XMLHttpRequest(); 2.1 语法格式 如需将请求发送到服务器，使用XMLHttpRequest()对象的open()、se
jQuery AJAX 方法
12-13
jQuery AJAX 方法 jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法： 方法 描述 $.ajax() 执行异步 AJAX ...
jquery.ajax之beforeSend方法使用介绍
10-25
主要介绍了jquery.ajax之beforeSend方法使用介绍,beforeSend方法用于在向服务器发送请求前添加一些处理函数,需要的朋友可以参考下
jQuery Ajax()方法使用指南
10-25
jQuery.ajax()功能比较强大，可配置的参数比较多，本文主要对这个方法的注意事项进行总结。有相同需求的童鞋们也来仔细看看吧，希望对大家能有所帮助
AJAX请求是什么？
希冀
04-23 5762
文章目录什么是AJAX请求？原生AJAX请求的示例：jQuery中的AJAX请求 什么是AJAX请求？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 ajax是一种浏览器通过js异步发起请求，局部更新页面的技术。 Ajax请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来...
Ajax的简单使用
m0_62609939的博客
04-28 1305
Ajax的简单使用
jQuery中ajax的使用（最详细）
热门推荐
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
web前端(6)：Ajax的简单使用
不愿意透露姓名的网友
09-21 2819
AJAX （全称：Asynchronous JavaScript and XML）异步的 JavaScript 和 XMLAJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
第8讲：$.ajax方法使用详解
软件之家的博客
06-23 3012
jQuery对象上面定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。ajax方法有很多属性，但并非每次调用都要使用所有属性，本讲详细介绍了每个属性的作用，并给出具体的调用案例，分别从服务器返回文本格式数据，JSON格式数据及xml格式数据。
Ajax的基础使用
jakelihua
01-11 625
ajax的基本使用
（JQuery）Ajax 方法及属性解析
WannaRunning的博客
01-29 500
完整的写法如下： $.ajax({ url:需要请求的servlet地址; data:参数; type:post  (get); dataType:表示服务器返回的数据类型; async:是否同步; cache:是否缓存; success:function();表示成功回调函数。 })； 具体参数属性解析：
JS----Ajax中XMLHttpRequest常用方法及属性
bugQueen的博客
12-23 1326
1. XMLHttpRequest常用方法 一、open(); XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。 例： xhr.open('POST', '/carrots-admin-ajax/a/login', true); 参数: method:用于指定请求的类型 "GET"或者"POST" url:用于请求的地址, 可相对可绝对 asyncFlag:指定请求方式为同步还是异步, true
JQuery发送Ajax请求的5种简单使用方式，一看就会~
冷芝士鸭的学习笔记
10-19 7981
JQuery发送Ajax请求的5种简单使用方式，一看就会~ 1、Ajax简介 1.1 什么是Ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在
jQuery的ajax方法
最新发布
04-21
以下是关于jQuery的ajax方法的一些介绍： 1. 发送请求：使用ajax方法可以发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等。可以通过设置参数来指定请求的类型。 2. 异步操作：ajax方法默认使用异步方式发送...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值