美文网首页程序员
2018-05-30(ajax)

2018-05-30(ajax)

作者: acebear | 来源:发表于2018-05-30 22:55 被阅读0次

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 和内嵌XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与服务器交换数据

创建 XMLHttpRequest 对象的语法:variable=new XMLHttpRequest();

不确定浏览器是否支持时:

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(method,url,async);//规定请求的类型、URL 以及是否异步处理请求。 //method:请求的类型;GET 或 POST。url:文件在服务器上的位置。               //async:true(异步)或 false(同步)

xmlhttp.send(string);//将请求发送到服务器。String:仅用于POST请求

一个简单的 GET 请求:

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

xmlhttp.send();

一个简单 POST 请求:

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

xmlhttp.send();

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

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

1.无法使用缓存文件(更新服务器上的文件或数据库)

2.向服务器发送大量数据(POST 没有数据量限制)

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


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

xmlhttp.onreadystatechange=function()  //onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

{  if (xmlhttp.readyState==4 && xmlhttp.status==200)   {            //   readyState存有 //XMLHttpRequest 的状态。从 0 到 4 发生变化(0: 请求未初始化;1: 服务器连接已建; //2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪) status只有两种状态: //200: "OK";404: 未找到页面

    document.getElementById("Div").innerHTML=xmlhttp.responseText;    } }

//之后再执行GET或POST请求

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

//GET或POST请求

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

注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。


需获得来自服务器的响应

使用 XMLHttpRequest 对象的 responseText (获得字符串形式的响应数据)或 responseXML(获得 XML 形式的响应数据) 属性。

上面的例子用到的就是responseText 属性。

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

xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("title");

for (i=0;i<x.length;i++)

  {  txt=txt + x[i].childNodes[0].nodeValue + "<br />";  }

document.getElementById("Div").innerHTML=txt;

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

相关文章

  • 2018-05-30(ajax)

    AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以...

  • 邂逅铜砭刮痧。

    2018-05-30 那时花开zwh 2018-05-30 10:26 · 字数 826 · 阅读 12 · 日记...

  • 2018-05-30

    2018-05-30 蜡笔小新坦坦 2018-05-30 09:08 · 字数 516 · 阅读 13 · 日记本...

  • 2018-05-30

    2018-05-30 蜡笔小新坦坦 2018-05-30 02:38 · 字数 488 · 阅读 1 · 日记本 ...

  • 2018-05-30

    2018-05-30 戴师傅简书作者 2018-05-30 20:26 打开App (稻盛哲学学习会)打卡第71天...

  • @import - 2018-05-30

    2018-05-30 创建 less的导入(@import)语法:@import (keyword) “filen...

  • 赖世雄美语从头学初级篇(上)Lesson 037 A Wond

    Screen Shot 2018-05-30 at 15.00.53.png I. Reading 阅读 My g...

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

网友评论

    本文标题:2018-05-30(ajax)

    本文链接:https://www.haomeiwen.com/subject/ttwxsftx.html