秃头油腻胖子Ajax进阶之路（上）

时间：2023-04-02 21:10:37 HTML

W3C学习笔记（谁说抄袭不是笔记？）Ajax基础知识Ajax教程Ajax=AsynchronousJavaScriptandXML（异步JavaScript和XML）。Ajax不是一种新的编程语言，而是一种使用现有标准的新方法。Ajax是一种与服务器交换数据并更新网页部分内容(???)而无需重新加载整个页面的艺术。Ajax简介Ajax是一种无需重新加载整个网页即可更新网页部分内容的技术。在学习之前，你应该对以下知识有一个基本的了解：HTML/XHTMLCSSJavaScript/DOM*什么是Ajax？Ajax=异步javascript和xml。Ajax是一种用于创建快速动态网页的技术。Ajax允许通过在后台与服务器交换少量数据来异步更新网页。这允许在不重新加载整个网页的情况下更新网页的部分内容。如果传统网页（不适用于Ajax）需要更新内容，则必须更新整个网页。使用Ajax的应用案例有很多：谷歌地图、弹幕等。Ajax示例案例见：https://www.w3school.com.cn/a...Ajax示例讲解：上面的Ajax应用包含一个div和一个按钮。div部分用于显示来自服务器的信息。单击按钮时，它负责调用名为loadXMLDoc()的函数。注意这是中需要写的页面显示部分：

让Ajax改变这段文字

ChangeContent下一步是添加部分添加脚本标签：AjaxXHRXHR创建对象XMLHttpRequest是AjaxXMLHttpRequest对象的基础所有现代浏览器都支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。XMLHttpRequest用于在后台与服务器交换数据，这意味着可以更新网页的一部分而无需重新加载整个页面。创建XMLHttpRequest对象所有浏览器（IE7+、FireFox、Chrome、Safari和Opera）都使用XMLHttpRequest对象来创建XMLHttpRequest对象语法：variable=newXMLHttpRequest();Ajax请求XMLHttpRequest对象用于与服务器交换数据并向服务器发送请求。说到通过服务器发送请求，我们使用XMLHttpRequest对象的open()和send()方法：xmlhttp.open("GET","test1.txt",true);xmlhttp.send();方法说明open(method,url,async)指定请求的类型、URL以及是否异步处理请求。1.method：请求的类型；获取和发布。2.URL：文件在服务器上的位置3.async：true（异步）或false（同步）send(String)向服务器发送请求。字符串：仅用于POST请求GET或POST？与POST相比，GET相对简单快捷，在大多数情况下都可以使用，那么在以下情况下，请使用POST请求：不能像服务器一样使用缓存文件（更新文件或服务器上的数据库）发送大量的数据（POST没有数据大小限制）当发送包含未知字符的用户输入时，POST比GET更有文档和更可靠*GET请求一个简单的GET请求：xhr.open("GET","demo_get.asp",true);xhr.发送();如果想通过GET方式发送信息，可以加上：xhr.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xhr.send();POST请求一个简单的POST请求：xhr.open("POST","demo_post.asp",true);xhr.发送();如果您需要像HTML表单一样POST数据，您可以使用setRequestHeader()添加HTTP标头。然后在send方法中指定你要发送的数据：xhr.open("POST","demo_post.asp",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("fname=Bill&lname=Gates");方法说明setRequestHeader(_header_,_value_)将HTTP标头添加到请求中。hearer:指定header的名称value:指定header的值~~~~url-服务器上的文件open()方法的url参数为文件在服务器上的地址：xmlhttp.open("GET","ajax_test.asp",true);该文件可以是任何类型的文件，例如：.txt和.xml，或者服务器脚本文件，例如：.asp和.php（能够在返回响应之前在服务器上执行任务）。异步：async=true当使用async=true时，需要指定onreadystatechange时间对应的就绪状态时执行的函数：xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.getElementById("myDiv").innerHTML=xhr.responseText;}}xhr.open("GET","test1.txt",true);同步：async=false如果使用async=false，需要在open()方法中将第三个参数改为false，W3C不推荐，但是对于小请求也是可以的。请记住，javascript会等到服务器响应准备好后再继续，如果服务器繁忙或缓慢，应用程序将挂起或停止XHR响应服务器要从服务器获得响应，您需要responseText或responseXML属性XMLHttpRequest对象。属性描述responseText获取字符串形式的响应数据。responseXML获取XML格式的响应数据。responseText属性responseText属性以字符串的形式返回响应，写为：document.getElementById("myDiv").innerHTML=xhr.responseText；responseXML属性如果服务器的响应是XML，需要解析为XML对象，则需要使用responseXML，例如：xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementByTagName("SHIT");for(i=0;i";}document.getElementById("myDiv").innerHTML=txt;XHRreadyStateonreadystatechange事件当向服务器发送请求时，我们需要执行一些急于响应的任务。每当readState发生变化时，都会触发onreadystatechange事件。readyState属性存储了XMLHttpRequest的状态信息。以下是XMLHttpRequest对象的三个重要属性：该属性描述了onreadystatechange存储函数（或函数名），每当readyState属性发生变化时都会调用该函数。readyState存储XMLHttpRequest的状态。从0到4不等。0：请求未初始化。1：服务器连接建立。2：收到请求。3：正在处理请求。4：请求已经完成，响应就绪status200:"OK"400:Pagenotfound在onreadystatechange事件中，我们指定当服务器响应准备好处理时要执行的任务。当readyState等于4，status为200时，表示响应就绪：xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4&&xmlhttp.status==200){document.getElementById("我的分区”）。innerHTML=xmlhttp。响应文本；}}

上一篇：零基础教你学前端——60.CSS属性选择器

下一篇：注册和登录（关于cookies）

秃头油腻胖子Ajax进阶之路（上）相关文章