Ajax是什么?及实现步骤和原理

作者 : 开心源码 本文共3355个字,预计阅读时间需要9分钟 发布时间: 2022-05-11 共103人阅读

一、什么是Ajax?

  • Ajax = 异步 JavaScriptXML
  • Ajax是一种使用于创立快速动态网页的技术。
  • 通过在后端与服务器进行一些数据交换,Ajax能使网页实现异步升级。这意味着能在不重新加载整个网页的情况下,对网页的某部分进行升级。
  • 传统的网页(不用 Ajax)假如需要升级内容,必须重载整个网页面。

?? 有很多用 Ajax的应使用程序案例:新浪微博、Google 地图、开心网等等。
?(注意:Ajax 不是一种新的编程语言,而是一种使用于创立更好更快以及交互性更强的Web应使用程序的技术。)

二、Ajax工作原理

三、ajax的用及实现步骤

??(1) 创立XMLHttpRequest对象,也就是创立一个异步调使用对象.
??(2) 创立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
??(3)设置响应HTTP请求状态变化的函数.
??(4)发送HTTP请求.
??(5)获取异步调使用返回的数据.
??(6)用JavaScript和DOM实现局部刷新.

以下步骤,假如不可以了解你死记硬背都要记下来,总比你答不出来要好吧!

??1.创立Ajax核心对象XMLHttpRequest

var xmlHttp;if(window.XMLHttpRequest){  //针对除IE6以外的浏览器    xmlHttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest}else{   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   //针对IE5,IE6}

??2.向服务器发送请求

xmlhttp.open(method,url,async);xmlhttp.send();

示例如下:

var xmlHttp = new XMLHttpRequest();   xmlHttp.open('get','demo_get.html','true');//调使用open()方法并采使用异步方式   xmlHttp.send(); //用open()方法将请求发送出去   xmlHttp.onreadystatechange()=>{        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){           }}

??onreadystatechange事件可指定一个事件解决函数来解决XMLHttpRequest对象的执行结果。

四、详解区分请求类型:GET 或者 POST

方法形容
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.html",true); xmlHttp.send();

??在上面的例子中,您可可以得到的是缓存的结果。

  • 为了避免这种情况,请向 URL 增加一个唯一的 ID
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true); xmlhttp.send();
  • 假如您希望通过 GET 方法发送信息,请向 URL 增加信息:
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); xmlhttp.send();

提醒:GET请求具备以下的几个特点:

  • GET 请求可被缓存
  • GET 请求保留在浏览器历史记录中
  • GET 请求可被收藏为书签
  • GET 请求不应在解决敏感数据时用
  • GET 请求有长度限制
  • GET 请求只应当使用于取回数据

  • POST 请求
  • 一个简单 POST 请求:
xmlhttp.open("POST","demo_post.html",true); xmlhttp.send();

??假如需要像 HTML 表单那样 POST 数据,请用setRequestHeader() 来增加 HTTP 头。而后在send()方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.html",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
方法形容
setRequestHeader(header,value)向请求增加 HTTP头????? header: 规定头的名称;???? ? value: 规定头的值

提醒:POST请求的特点如下:

  • POST 请求不会被缓存
  • POST 请求不会保留在浏览器历史记录中
  • POST 请求不可以被收藏为书签
  • POST 请求对数据长度没有要求

为什么用 Async=true ?

??我们的实例在 open() 的第三个参数中用了 “true”。该参数规定请求能否异步解决。True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。
??onreadystatechange事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码中止的最安全的方法。
??通过把该参数设置为 “false”,能省去额外的 onreadystatechange 代码。假如在请求失败时能否执行其他的代码无关紧要,那么能用这个参数。

五、Ajax中的少量解决

    1. 服务器响应解决
      ??responseText 取得字符串形式的响应数据。
      ??responseXML 取得XML 形式的响应数据。
    1. 同步解决
  xmlHttp.open("GET","demo_get.html",false);  xmlHttp.send(); document.getElementById("target").innerHTML=xmlHttp.responseText;

??直接在send()后面解决返回来的数据。

    1. 异步解决

? 异步解决相比照较麻烦,要在请求状态改变事件中解决。

xmlHttp.onreadystatechange=function(){//接收到服务端响应时触发if(xmlHttp.readyState==4&&xmlHttp.status==200){document.getElementById("target").innerHTML=xmlHttp.responseText;      }}

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

属性形容
onreadystatechange存储函数(或者函数名),每当 readyState 属性改变时,就会调使用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。????? 0: 请求未初始化;????? 1: 服务器连接已建立;???? ? 2: 请求已接收;????? 3: 请求解决中;?? ??? 4: 请求已完成,且响应已就绪
status? 200: “OK” ; ? 404: 未找到页面

??在 onreadystatechange·事件中,我们规定当服务器响应已做好被解决的准备时所执行的任务。
??当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.status:响应状态码。这个也是面试比较爱问的,这个必需知道4个以上(把上面两个状态码也列到下边了),比较常见的有:

  • 200: “OK”
  • 304:该资源在上次请求之后没有任何修改(这通常使用于浏览器的缓存机制,用GET请求时尤其需要注意)。
  • 403 (禁止) 服务器拒绝请求。
  • 404 (未找到) 服务器找不到请求的网页。
  • 408 (请求超时) 服务器等候请求时发生超时。
  • 500 (服务器内部错误) 服务器遇到错误,无法完成请求。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Ajax是什么?及实现步骤和原理

发表回复