ajax学习笔记

于 2020-12-24 16:20:26 发布
阅读量246 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaodong1998/article/details/111626528
版权

ajax学习笔记

1 定义与理论

  1. Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
  2. ajax是一种标准；
  3. ajax与浏览器无关；
  4. ajax无需重新加载整个页面就可与服务器数据交换，以改变页面数据，对页面某部分进行更新；
  5. ajax不需要任何插件；
  6. XMLHttpRequest对象用于和服务器交换数据；
  7. 写在 < script > 里；

2 创建XMLHttpRequest

  1. IE5、IE6用的是ActiveXObject
variable = new ActiveXObject（"Microsoft.XMLHTTP"）;
  1. 现代浏览器与IE7+使用的是XMLHttpRequest
variable = new XMLHttpRequest();

所以，在实际应用中，要先判断当前浏览器是支持哪一个对象。如果支持XMLHttpRequest对象，就创建，否则创建ActiveXObject。

<html>
<script>
variable = xmlhttp;
if(window.XMLHttpRequest){
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp = new XMLHttpRequest();
  }
  else{
  // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTP");
  }
  </script>
 </html>

3. XMLHttpRequest 对象的属性

属性描述
onreadystatechange存储函数（名），当== readyState 发生改变，调用此函数==
readyState存 XMLHttpRequest 状态信息（0-4）

0 ：请求未初始化
1：已建立服务器连接
2：请求已接收
3：请求已处理
4：请求已完成 且 响应已就绪
status200: “OK”
404: 未找到页面
  • readyState == 4 且 status == 200 时响应就绪。
  • onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
回调函数
  1. 是一种以参数形式传递给另一个函数的函数。
  2. 如果网站上存在多个 AJAX 任务，为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
  3. 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

4. 请求

4.1 发送请求：open(),send()
方法描述
open(method,url,async)
xmlhttp.open(“GET”,“ajax_info.text”,true);		规定请求类型、URL和是否异步处理请求
method : 请求类型，GET or POST
url : 文件在服务器上的位置，可以为任何类型
async : 异步（true） or 同步（false）
send(string)
xmlhttp.send();		将请求发送到服务器
string : 仅用于POST请求
4.2 POST 与 GET
4.2.1 POST
  • POST无数据量限制（向服务器发送大量数据时）
  • 可以更新服务器上的文件与数据（当数据缓存无法使用时）
  • 比GET更稳定、可靠（发送包含未知字符的用户输入时）
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
//发送返回内容时
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=张&lname=three");//返回 你好，张three，今天过得怎么样？
方法描述
setRequestHeader(header,value)向请求添加HTTP头
header : 规定头的名称
value : 规定头的值
4.2.2 GET
open("GET","url",true);//可能得到的是缓存结果
send();

//避免得到缓存结果，向每个请求添加ID
open("GET","url?t="+Math.Random(),true);
send();

//如需发送信息，则向URL添加信息
open("GET","url?fname=张&lname=three",true);
send();
4.3 同步、异步
异步
1.通过ajax，JS可以在等待服务器响应时执行其他文件
2.在响应就绪后执行其他文件
3.onreadystatechange() :当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数： 
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","url",true);
xmlhttp.send();

同步
1.JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
2.使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面 
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

5. 服务器响应

5.1 获得服务器响应需要用到 XMLHttpRquest 对象的两个属性 reponseText 和 reponseXML 。
属性描述代码
reponseText获取字符串形式的响应数据document.getElementByID(" 元素所在ID名").innerHTML = xmlhttp.reponseText;
reponseXML获取XML形式的响应数据(需要解析)见示例

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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)
    {
    //解析xml
      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>
</html>

5.2 AJAX 创造动态性更强的应用程序

showHint（）函数
网页如何与web服务器进行通信：（asp/php）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  //01.判断输入框内容
  if (str.length==0)//有时候或者是 str.length==""
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  //02.创建XMLHttpRequest对象
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
  }
  //03.当服务器响应就绪时执行函数
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  //04.把请求发送到服务器上的文件
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  //向url添加了q （带有输入框的内容）+ 输入内容str
  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>
5.3 AJAX 与 数据库 进行动态通信

showCustomer（）函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
  var xmlhttp;   
//01.检查是否已选择某个客户 
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
//02.创建XMLHttpRequest对象
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
//03.当服务器响应就绪时执行函数
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
//04.把请求发送到服务器上的文件
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  //向url添加了q （带有输入域的内容）
  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>
5.4 AJAX 与 XML 文件进行交互式通信

loadXMLDoc() 函数

  1. 当服务器响应就绪时，会构建一个 HTML 表格，
  2. 从 XML 文件中提取节点（元素），
  3. 最后使用 XML 数据 填充 id=“demo” 的表格元素：
<!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="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>

<script>
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;
}
</script>

</body>
</html>
zaodong1998
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax原生实现xmlhttp.open（）方法中url的小问题
Milk的博客
03-23 1628
在实现ajax原生方法中用到了xmlhttp.open()方法，其中url直接写为servlet项目配置的路径，浏览器访问不到，代码以及目录如下： （1）html前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生aj...
XMLHttpRequest对象详解和事例
曾舜尧的专栏
08-06 4656
XMLHttpRequest对象详解 1、概述 2、XMLHttpRequest 的方法和属性 XMLHttpRequest包含了基本的属性和方法，正是通过这些方法和属性实现了对服务器的通讯。Ajax依赖XMLHttpRequest完成与服务器的通信。 XMLHttpRequest的基本方法如下： Abort():停止发送当前请求。 getAllResponseHeader
xmlhttp:open方法中的POST、GET参数的区别
weixin_34297300的博客
10-08 701
1  问题描述： xmlhttp:open方法，请求页面的时候，更新页面数据后，第2次拿到的结果还是上次的信息 2  解决办法： 改用POST方式 3  说明： xmlhttp:open方法 创建一个新的http请求，并指定此请求的方法、URL以及验证信息 语法 oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser...
XMLHttpRequest 及其open()的用法
热门推荐
小木木的开发日常
02-21 1万+
XMLHttpRequest 对象用于在后台与服务器交换数据,它能够 在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；在页面已加载后从服务器接收数据；在后台向服务器发送数据。 XMLHttpRequest.open()语法 open(method, url, async, username, password) 各参数的解析： method参数是用于请求的 H
AJAX
inexaustible的博客
09-08 416
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 一、简介 AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情.
什么是AJAX?
learning_web的博客
07-23 2130
这里是修真院前端小课堂，每篇分享文从 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是AJAX?】 大家好，我是 IT 修真院上海分院第八期的学员何岳，一枚正直纯洁善良的web程序员 今天给大家分享一下，修真院官网 JS任务五，深度思考中的知识点——什么是AJAX? 背景介绍 什么是AJAX? async JavaScript and xml，异步的js和xml ajax之所以称为异步...
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
AJAX的基本知识
weixin_44543324的博客
08-17 612
一、AJAX是什么？ AJAX = Asynchronous JavaScript and XML（异步的JavaScript和 XML）。 AJAX不是新的编程语言，它是一种使用现有标准的新方法，是一种用于创建快速动态网页的技术；通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，也就意味着AJAX是一种在无需重新加载网页的情况下，能够更新部分网页的技术。 （每当用户向服务器端发...
XMLHttpRequest对象的open方法
WARGON的博客
06-10 9116
open(method,url,async):method：一般情况下使用GET方法可以满足要求，使用更简单也更快。但是，在无法使用缓存文件（更新服务器上的文件或数据库）、向服务器发送大量数据以及发送包含位置字符的用户输入时，应该使用post。    GET：例：xmlhttp.open("GET","/try/ajax/demo_get.php",true);    这种直接使用方式可能得到的是...
XMLHttpRequest API语法、函数简介
anyx的专栏
12-19 1161
XMLHttpRequest是Ajax的核心对象，通过此对象，Javascript可以以异步或同步的方式与服务器端通信。 一，IE和其他浏览器创建该对象的方法 [javascript] view plaincopyprint? var xmlhttp = false;       //当指定XMLHttpRequest为异步传输时(false),
ajax的简单学习
cheer_98_的博客
10-29 227
初始ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。局部刷新 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ...
AJAX详解（一）
yisany_Q的博客
11-07 301
AJAX Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少...
AJAX基本概念学习
兮遥
08-21 287
目录 全局刷新 局部刷新 AJAX概念 AJAX 异步实现分析 原生JS方式实现Ajax 全局刷新 简单说就是数据全部覆盖掉原来 index 页面内容，整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等 就比如简单的登录 index.jsp 发起登录请求--------LoginServlet--------result.jsp 局部刷新 浏览器在展示数据时，此时在窗口既可以看到本次的响应数据， 同时又可以看到浏览器内存中原有数据 AJAX概念...
XMLHTTP下open问题
weixin_33922670的博客
06-22 1005
今天发现一个很郁闷的问题，折腾了一整天，才发现是什么原因。写出来供大家参考，以后大家碰到此类问题有个数。 问题如下： 有以下一段代表 functionLogin(username,password,geturl){varxmlhttp=null;try{xmlhttp=newActiveXObject("MSXML2.XMLHTTP")}catch(e){xml...
9.18Ajax
lcy19920504的专栏
09-18 1976
您的位置:  jsp/Main.jsp">账户管理  账户信息查询 --%> 卡号 卡种 总余额 活期余额 可用余额
Ajax学习笔记pink老师
最新发布
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值