AJAX的学习

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

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

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。

创建 XMLHttpRequest 对象的语法:

为了应对所有的现代浏览器,包括 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");
  }

向服务器发送请求

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

get和post用哪个好?

与post相比,get更简单更快,并且在大多数情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址:

该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

异步 - True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

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

 注意:我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

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

如果来自服务器的响应是 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 等于 4 且status状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

使用 Callback 函数

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

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

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

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
				
时间: 2024-10-10 02:39:35

AJAX的学习的相关文章

Ajax入门学习原始代码

<script type="text/javascript">        window.onload = function () {            //1.创建xmlhttprequest对象            var xhr = createXHR();            function createXHR() {//为了兼容新老IE的版本                var request;                if (typeof(X

AJAX异步学习总结(1)

AJAX异步学习总结(1) AJAX异步学习总结(1) ①:运用HTML和CSS来实现页面,表达信息: ②:运用XMLHttpRequest和服务器进行数据的异步交换: ③:运用JavaScript操作DOM,实现动态局部刷新: HTTP请求 HTTP是一个无状态的链接 一个完整的HTTP请求过程,7个步骤 建立TCP连接: WEB浏览器向WEB服务器发送请求命令: Web浏览器发送请求头信息: Web服务器应答: Web服务器发送应答头信息: Web服务器向浏览器发送数据: Web服务器关闭T

ajax 简单学习

客户端代码function login(type) { $.ajax({ type: "post", url: "logindo.aspx", data: { user: $("#name").val(),//对应<input type="text" id="name"/>的值 pwd:pwd ////对应<input type="password" id="

AJAX快速学习笔记

可关注我的个人微信公众号:卟野iiiiiiiya AJAX快速学习笔记: https://mp.weixin.qq.com/s?__biz=MzI0MDY0NzI3Mw==&tempkey=OTMwX2NOeUIrdzFEaThtMFBiUlJYdFhqcWViaHY1bFlQUTdmU1RrUnpkc1IzQmNfWENHVXFZb2ZLajhURlFwbzZoOF80RlA0THdQeGVYcDB2OENSdnBKcUNHdU9QRER0OWxkUE9YUGp0SU90WmwwWVl1SnJ

Ajax的学习笔记(一)

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术.局部刷新页面使用的就是这种技术,这样的好处是页面不需要刷新,服务器处理的数据大大减少,减轻服务器压力.但是学习这门技术必须要邮编JavaScript的基础.

20151211Jquery Ajax进阶学习笔记

四.JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非 同域下,可以使用 JSONP,但也是有条件的. //$.ajax()加载 JSON 文件 $.ajax({ type:'POST', url:'test.json', dataType:'json', success:function(response,status,xhr){ alert(response[0].url); } }); 如果想跨域操作文件的话,我

AJAX(学习笔记一)

1:什么是AJAX? AJAX是一组英文单词的简写,这组英文单词是 :Asynchronous JavaScript and XML ,翻译成中文的意思是: 异步的JavaScript 和 XML.什么意思呢?简单点讲就是:通过HTML页面中的JavaScript方法能够不刷新整个页面的情况下实现和服务端进行交流返回对应的请求数据,而返回的数据常常是两种格式的,文本格式和XML格式的,但是文本格式比较简单使用XML格式的数据很容易替代掉,所以使用XML表示更加的贴切,现在常常返回JSON格式的数

AJAX之学习笔记(持续更新......)

以前的学习都是在Evernote上做的笔记,之前也在博客园注册过,但是一直没用,就荒废了.最近想既然是学技术的,用这个来记我的一些日常学习笔记是在好不过了. 总之加油吧~~~希望自己能早日摆脱新手这个称呼嘻嘻(*^__^*) 1.AJAX的定义 AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)——此处应先了解HTML.XHTML.CSS.JavaScript和DOM结构. AJAX是一种新方法,不是新的编程语言,可以在不需要重新加载网

Ajax 技术学习

一.Ajax 基础 1.1 什么是 Ajax? 1.2 在哪里我们会用到 ajax 1.3 ajax 的工作原理 1.4 XMLHttpRequest 对象 1.4.1 XMLHttpRequest 常用方法 1.4.2 XMLHttpRequest 常用属性 二.让我们来试一试吧 2.1 简单的使用 ajax ,验证用户名是否合法 2.1.1 前端 demo (index.jsp) 2.1.2 JavaScript demo 2.1.3 2.1.4 后端 servlet 代码 2.2 运行截图

Jquery+Ajax+php学习笔记

昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步<script type="text/javascript">$(docum