AJAX基础语法

最新推荐文章于 2023-04-28 12:15:58 发布
最新推荐文章于 2023-04-28 12:15:58 发布
阅读量565 收藏 1
点赞数
分类专栏： # 前端 AJAX 文章标签： ajax javascript safari
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44174346/article/details/126164135
版权

在这里插入图片描述

AJAX是基于现有的Internet标准，并且联合使用它们：

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

创建 XMLHttpRequest 对象

<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>

向服务器发送请求

XMLHttpRequest open() send()

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

GET 请求

为了避免得到缓存，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

POST 请求

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

<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_post2.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>

服务器 响应

属性描述
responseText获得字符串形式响应数据
responseXML获得XML形式的响应数据

responseText 属性

<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>

responseXML 属性⭐

<script>
function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  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)
    {
      xmlDoc=xmlhttp.responseXML;
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
}
</script>
</head>

<body>

<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
</body>

onreadystatechange 事件

<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>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

<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>

ASP/PHP 实例

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();
}

如果输入框为空 str.length==0，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

AJAX Database 实例⭐

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();
}

showCustomer() 函数执行以下任务：

检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

XML 实例

function loadXMLDoc() {
  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;
}

当用户点击上面的"获取我收藏的 CD"这个按钮，就会执行 loadXMLDoc() 函数。

loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用 XML 数据的 填充 id=“demo” 的表格元素
在这里插入图片描述

Gary jie
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax基础培训
09-04
JavaScript基本语法 弱类型，基于对象，事件驱动 DOM模型 例子，见ajax示例
Ajax 什么是Ajax? Ajax的基本语法
felix的博客
03-06 2239
Ajax 什么是Ajax? AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML,现在更多使用json数据)。 同步交互: 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。 异步交互: 客户端发出一个请...
jQuery中的Ajax
weixin_43563864的博客
10-27 269
一.jQuery中的Ajax 浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。 jQuery 中发起 Ajax 请求最常用的三个方法如下： $.get() $.post() $.ajax() 1. $.get()函数的语法 jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。 $.get
Ajax基础语法总结
xzd2333的博客
03-14 1326
Ajax技术：在网页不跳转的情况下，向服务器请求数据 应用场景：局部刷新
Ajax单词语法汇总
proaqua_098的博客
04-28 164
2.什么是事件循环 ：事件循环(Ewent Loop)是什么 :js编译器“解析与执行》代码的一种规则1.js 代码分为两大类:同步:异步:异步宏:script标签、事件处理函数、定时器回调、ajax回调异步 微:promise.then() await/async。(1).把多个promise合并成一个新的promise,所有promise完成,就会执行then,then结果就是最 快的promise的结果(取其一)
Ajax语法
秋城落叶的博客
03-31 1489
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 XMLHttpRequ...
Ajax基础教程（扫描版）
01-10
5.4 使用jslint完成javascript语法检查 137 5.5 完成javascript压缩和模糊处理 138 5.6 使用firefox的web开发扩展 140 5.7 实现高级javascript技术 141 5.7.1 通过prototype属性建立面向对象的javascript 142 ...
ajax从基础学起
09-03
内容有：1.ajax入门的三个好例子，很值得学习和借鉴的地方，循序渐进的学习方法 2.ajax的方法从零开始讲起，如何实现，简单明了 3.java的重点介绍，不是纯粹的说说java的语法，既有浅度也有深度，我认为学...
ajax 入门基础之 XMLHttpRequest对象总结
01-21
XMLHttpRequest 提供客户端同http服务器通讯的协议 一：创建 IE : ... 二：onreadystatechange 指定当readyState属性改变时的事件处理句柄 语法 http_request .onreadystatechange = funcMyHandler; 三：ready
《Ajax笔记》
02-27
就业班时，就业老师整理的关于 Ajax的面试笔记，里边含有javaScript基础加强， Ajax编程入门，jQuery框架等一些核心资料。 核心内容概述 1.JavaScript加强，涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2....
Ajax基本语法 Ajax
01-11
在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例。
ajax基本语法
qq_45036782的博客
12-24 880
第二十一章 AJAX 1. AJAX 是什么 请求是什么? 请求是向后台发送一段信息, 然后后台会根据相关信息返回一些数据…这个就是请求.比如请求一些数据或者请求一些页面. 通常我们写的网页路径URL写在地址中, 每一个URL对应了一个完整的页面.我们请求的就是这个完整的页面.a标签里面的跳转页也是获取页面信息(html)的一种方式. html是我们获取的信息的一种, 相对应的也有xml XML: 是具有结构性的标记语言, 在JavaScript中等价于JSON对象 ajax(Asynchronous
AJAX 详解
热门推荐
06-19 1万+
Ajax基础知识，及常见问题详解
Ajax的语法格式
如何快速Java入门
11-02 3231
$.ajax({ url:"../regionservlet",//数据请求的地址 data:{"paid":-1},//返回给客户端的json数据 dataType:"json",//s数据类型格式 type:"post",//ajax数据访问的方法 success:function(listReceive){ $("#province").empty(); ...
对原生ajax的理解
Leon_Jinhai_Sun的博客
02-27 270
$.ajax({ url:'',//请求文件路径 type:'',//请求方式GET POST data:{},//要发给服务器的数据参数 dataType:'',//希望接口返回的数据格式json,string等等 success:function(){ // 请求成功的回调 }, error:function(){ ...
AJAX的解释和基本语法
许俊活的博客
06-24 504
AJAX的解释 AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等. AJAX请求的五个步骤 案例 第一步，创建XMLHttpRequest对象 第二步，注册回调函数 第三步
ajax笔记
qq_56088882的博客
07-31 527
客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。 网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
ajax的 基本语法
weixin_44560342的博客
07-17 313
ajax 基本语法 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局...
ajax基础知识
weixin_43713835的博客
11-06 218
1.基本语法 <script type="text/javascript"> // 1.创建ajax对象 var xhr = new XMLHttpRequest(); // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求 // 1)请求方式 2)请求地址 xhr.open('get', 'http://localhost:3000/first'); ...
ajax怎么快速学会
最新发布
08-09
2. 学习 JavaScript：Ajax 是通过 JavaScript 来实现的，因此你需要深入学习 JavaScript 的语法、DOM 操作和事件处理等基础知识。你可以通过在线教程、书籍或视频课程来学习。 3. 了解 XMLHttpRequest 对象：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gary jie

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值