Ajax笔记

最新推荐文章于 2022-05-04 19:34:17 发布
最新推荐文章于 2022-05-04 19:34:17 发布
阅读量455 收藏
点赞数
分类专栏： web前端 文章标签： ajax xmlhttprequest 服务器 safari ie url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengziyun/article/details/6730531
版权
 

Ajax笔记

 

一、什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

 

二、AJAX 实例解释

<head>

<script type="text/javascript">

function loadXMLDoc()

{

.... AJAX script goes here ...

}

</script>

</head>

<html>
<body>
 
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button>
 
</body>
</html>

 

三、XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

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");

  }

 

四、向服务器发送请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

·         method：请求的类型；GET 或 POST

·         url：文件在服务器上的位置

·         async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

·         string：仅用于 POST 请求

 

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

·  无法使用缓存文件（更新服务器上的文件或数据库）

·  向服务器发送大量数据（POST 没有数据量限制）

·  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

·         GET 请求

·         一个简单的 GET 请求：

·         xmlhttp.open("GET","demo_get.asp",true);

·         xmlhttp.send();

·         亲自试一试

·         在上面的例子中，您可能得到的是缓存的结果。

·         为了避免这种情况，请向 URL 添加一个唯一的 ID：

·         xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

·         xmlhttp.send();

·         亲自试一试

·         如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

·         xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

·         xmlhttp.send();

·         亲自试一试

·         POST 请求

·         一个简单 POST 请求：

·         xmlhttp.open("POST","demo_post.asp",true);

·         xmlhttp.send();

·         亲自试一试

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

·         xmlhttp.open("POST","ajax_test.asp",true);

·         xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

·         xmlhttp.send("fname=Bill&lname=Gates");

·         Async = true

·         当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

·         xmlhttp.onreadystatechange=function()

·           {

·           if (xmlhttp.readyState==4 && xmlhttp.status==200)

·             {

·             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

·             }

·           }

·         xmlhttp.open("GET","test1.txt",true);

·         xmlhttp.send();

 

五、服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性

描述

responseText

获得字符串形式的响应数据。

responseXML

获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

亲自试一试

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

请求 books.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;

 

六、onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

·         0: 请求未初始化

·         1: 服务器连接已建立

·         2: 请求已接收

·         3: 请求处理中

·         4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

七、实例

 

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
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)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

 

fengziyun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax的学习笔记
weixin_46685077的博客
06-26 105
Ajax的学习笔记
AJAX用法示例详解
eff666的博客
10-14 832
1、简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。总的来说，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。2、什么是AJAX？ AJAX = 异步
浅谈AJAX
wx_tracy的博客
05-04 214
1.AJAX=异步JS+XML； 2.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。即是一种用于创建快速动态网页的技术。个人认为此效果主要靠XML实现，因为XML的其中一个用途就是将数据从HTML中分离出来，这样就可以专注的使用CSS和HTML进行网页布局和样式，当基层数据改变的时候就可以不用动HTML和CSS，然后使用JS就可以读取一个外部 XML 文件，并更新网页的数据内容。所以在AJAX里面的XML就是用来作为转换数据的格式 3.AJAX工作原理 XMLHTTPR.
AJAX的基本原理及实例解析
weixin_49216824的博客
08-10 206
什么是Ajax Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。它并不是新的编程语言，而是几种原有技术的结合体。它由以下几种技术组合而成，包括： HTML/XHTML——主要的内容表示语言。 CSS——为XHTML提供文本格式定义。 DOM——对已载入的页面进行动态更新。 XML——数据交换格式。 XSLT——将XML转换为XHTML(用CSS修饰样式)。 XMLHt
Ajax学习
关启培的博客
07-13 135
（记事本复制过来的，凑合可以看下）AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX 是一种用于创建快速动态网页的技术。创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法：variable=new XM...
AJAX笔记
03-22
**AJAX笔记** 在网页开发中，AJAX（Asynchronous JavaScript and XML）是一种不刷新整个页面的情况下，与服务器交换数据并更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，...
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
Ajax笔记.docx
最新发布
06-12
**Ajax技术概述** Ajax，全称Asynchronous JavaScript and XML，是一种用于创建动态和交互性网页的技术。它允许网页在不完全刷新的情况下与服务器交换数据并更新部分网页内容，从而提升了用户体验，减少了网络带宽...
XMLHttpRequest创建对象、发送请求、接收响应
热门推荐
杜小白的博客
08-21 1万+
Ajax工作原理 XMLHttpRequest 对象 Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。 所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。 XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对...
利用ajax从txt读取数据
weixin_33827590的博客
09-16 706
html代码： <div id="news"></div> txt: [ {"id":"1", "news":"通知：直面企业社保痛点--为什么企业社保外包成趋势","url":"http://www.baidu.com"}, {"id":"2", "news":"一个好的HR就像一个好的CEO一样","url":"https://www.taobao.com/"}...
XMLHttpRequest
那年秋季有点冷的专栏
08-02 968
XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true);
Ajax异步请求步骤和代码
l_fireworks的博客
10-15 202
一道面试题 建立异步请求过程的4个步骤： a：new一个XHR对象 b：调用open方法 c：send一些数据 d：对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情 例子代码： var xhr = new XMLHttpRequest();//new一个XHR对象 //XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。 xhr.onload = function () { // 输出接收到的文字数据
AJAX 教程
weixin_30321449的博客
05-15 148
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 AJAX 实例 使用 AJAX 修改该文...
AJAX入门 之 使用 AJAX 修改页面文本内容（四）
稚枭天卓
07-07 6076
function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari // XMLHttpRequest对象：用来实现异步通讯的组件对象，是Ajax的核心技术 xmlhttp=new XMLHttpRequest(); } e
ajax实例
未名胡的博客
07-22 1124
一个简单的AJAX实例 创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。 function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHtt
ajax数据实例,AJAX 实例
weixin_39612058的博客
08-05 138
为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:实例function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE...
Ajax学习笔记
夜雨灬闻铃的博客
06-20 821
Ajax学习笔记 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值