网站运营维护方案,ajax做网站,网站需要人员,澄江网站制作AJAX AJAX Asynchronous JavaScript and XML#xff08;异步的 JavaScript 和 XML#xff09;。 AJAX 不是新的编程语言#xff0c;而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术#xff0c;在不重新加载整个页面的情况下。 AJAX 是一种在… AJAX AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML。 AJAX 不是新的编程语言而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术在不重新加载整个页面的情况下。 AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。 什么是 AJAX AJAX 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。 传统的网页不使用 AJAX如果需要更新内容必需重载整个网页面。 有很多使用 AJAX 的应用程序案例新浪微博、Google 地图、开心网等等。 Google Suggest 在 2005 年Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面当您在谷歌的搜索框输入关键字时JavaScript 会把这些字符 发送到服务器然后服务器会返回一个搜索建议的列表。 html
head
script typetext/javascript
function loadXMLDoc()
{
.... AJAX script goes here ...
}
/script
/head
bodydiv idmyDivh3Let AJAX change this text/h3/div
button typebutton onclickloadXMLDoc()Change Content/button/body
/html AJAX - 创建 XMLHttpRequest 对象 XMLHttpRequest 是 AJAX 的基础。 XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象IE5 和 IE6 使用 ActiveXObject。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。 创建 XMLHttpRequest 对象 所有现代浏览器IE7、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象。 创建 XMLHttpRequest 对象的语法 variablenew XMLHttpRequest(); 老版本的 Internet Explorer IE5 和 IE6使用 ActiveX 对象 variablenew ActiveXObject(Microsoft.XMLHTTP); 为了应对所有的现代浏览器包括 IE5 和 IE6请检查浏览器是否支持 XMLHttpRequest 对象。如果支持则创建 XMLHttpRequest 对象。如果不支持则创建 ActiveXObject var xmlhttp;
if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixmlhttpnew XMLHttpRequest();}
else{// code for IE6, IE5xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);} AJAX - 向服务器发送请求 XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器我们使用 XMLHttpRequest 对象的 open() 和 send() 方法 xmlhttp.open(GET,test1.txt,true);
xmlhttp.send(); open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method请求的类型GET 或 POSTurl文件在服务器上的位置asynctrue异步或 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?fnameBilllnameGates,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(fnameBilllnameGates); setRequestHeader(header,value) 向请求添加 HTTP 头。 header: 规定头的名称value: 规定头的值url - 服务器上的文件 open() 方法的 url 参数是服务器上文件的地址 xmlhttp.open(GET,ajax_test.asp,true); 该文件可以是任何类型的文件比如 .txt 和 .xml或者服务器脚本文件比如 .asp 和 .php 在传回响应之前能够在服务器上执行任务。 异步 - True 或 False AJAX 指的是异步 JavaScript 和 XMLAsynchronous JavaScript and XML。 XMLHttpRequest 对象如果要用于 AJAX 的话其 open() 方法的 async 参数必须设置为 true 对于 web 开发人员来说发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前这可能会引起应用程序挂起或停止。 通过 AJAXJavaScript 无需等待服务器的响应而是 在等待服务器响应时执行其他脚本当响应就绪后对响应进行处理Async true 当使用 asynctrue 时请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数 xmlhttp.onreadystatechangefunction(){if (xmlhttp.readyState4 xmlhttp.status200){document.getElementById(myDiv).innerHTMLxmlhttp.responseText;}}
xmlhttp.open(GET,test1.txt,true);
xmlhttp.send(); 我们不推荐使用 asyncfalse但是对于一些小型的请求也是可以的。 请记住JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢应用程序会挂起或停止。 注释当您使用 asyncfalse 时请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可 AJAX - 服务器响应 服务器响应 如需获得来自服务器的响应请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。分别获得字符串型的数据和xml型的数据 responseText 属性 如果来自服务器的响应并非 XML请使用 responseText 属性。 responseText 属性返回字符串形式的响应因此您可以这样使用 document.getElementById(myDiv).innerHTMLxmlhttp.responseText; responseXML 属性 如果来自服务器的响应是 XML而且需要作为 XML 对象进行解析请使用 responseXML 属性 请求 books.xml 文件并解析响应 xmlDocxmlhttp.responseXML;
txt;
xxmlDoc.getElementsByTagName(ARTIST);
for (i0;ix.length;i){txttxt x[i].childNodes[0].nodeValue br /;}
document.getElementById(myDiv).innerHTMLtxt; AJAX - onreadystatechange 事件 onreadystatechange 事件 当请求被发送到服务器时我们需要执行一些基于响应的任务。 每当 readyState 改变时就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性 onreadystatechange存储函数或函数名每当 readyState 属性改变时就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成且响应已就绪status 200: OK 404: 未找到页面 在 onreadystatechange 事件中我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时表示响应已就绪 xmlhttp.onreadystatechangefunction(){if (xmlhttp.readyState4 xmlhttp.status200){document.getElementById(myDiv).innerHTMLxmlhttp.responseText;}} 注释onreadystatechange 事件被触发 5 次0 - 4对应着 readyState 的每个变化 使用 Callback 函数 callback 函数是一种以参数形式传递给另一个函数的函数。 如果您的网站上存在多个 AJAX 任务那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数并为每个 AJAX 任务调用该函数。 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务每次调用可能不尽相同 html
head
script typetext/javascript
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixmlhttpnew XMLHttpRequest();}
else{// code for IE6, IE5xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);}
xmlhttp.onreadystatechangecfunc;
xmlhttp.open(GET,url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc(/ajax/test1.txt,function(){if (xmlhttp.readyState4 xmlhttp.status200){document.getElementById(myDiv).innerHTMLxmlhttp.responseText;}});
}
/script
/head
bodydiv idmyDivh2Let AJAX change this text/h2/div
button typebutton onclickmyFunction()通过 AJAX 改变内容/button/body
/html AJAX ASP/PHP 请求实例 html
head
script typetext/javascript
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixmlhttpnew XMLHttpRequest();}
else{// code for IE6, IE5xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);}
xmlhttp.onreadystatechangecfunc;
xmlhttp.open(GET,/ajax/gethint.asp?qstr,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc(/ajax/test1.txt,function(){if (xmlhttp.readyState4 xmlhttp.status200){document.getElementById(myDiv).innerHTMLxmlhttp.responseText;}});
}
/script
/head
bodydiv idmyDivh2Let AJAX change this text/h2/div
button typebutton onclickmyFunction()通过 AJAX 改变内容/button/body
/html 源代码解释 如果输入框为空 (str.length0)则该函数清空 txtHint 占位符的内容并退出函数。 如果输入框不为空showHint() 函数执行以下任务 创建 XMLHttpRequest 对象当服务器响应就绪时执行函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数 q 带有输入框的内容 转载于:https://www.cnblogs.com/runhua/p/7141859.html
