ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

what‘s the ajax?

2021-06-08 13:02:38  阅读:157  来源: 互联网

标签:what 请求 ajax Content Ajax AJAX 服务器 客户端


 Ajax定义

 AJAX不是一门新的语言,是综合HTTP异步通信js、xml、以及JSON等多种网络技术的一种编程模式。
Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(无刷新技术)。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。

Ajax的优缺点

优点缺点
1)页面无刷新更新数据:AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。1)AJAX 干掉了Back和History功能,即对浏览器机制的破坏:在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现的 ,后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题。
2)异步与服务器通信:AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。2)AJAX的安全问题:AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
3)前端和后端负载平衡:AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。3)对搜索引擎支持较弱:对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。
4)基于标准被广泛支持:AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。4)破坏程序的异常处理机制:至少从目前看来,像Ajax.dll,Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的
5)界面与应用分离:Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。5)违背URL和资源定位的初衷:我给你一个URL地址,如果采用了Ajax技术,也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
---------------------------------------------------------6)AJAX不能很好支持移动设备:一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
---------------------------------------------------------7)客户端过肥,太多客户端代码造成开发上的成本:编写复杂、容易出错 ;冗余代码比较多(层层包含js文件是AJAX的通病,再加上以往的很多服务端代码现在放到了客户端);破坏了Web的原有标准。
---------------------------------------------------------

8)如果用户禁用了JS,网站就取不到数据。

Ajax请求数据

JS请求数据


function ajax() {
     // 1.创建ajax引擎对象
     var xhr = null;
     //确定兼容性
     window.XMLHttpRequest ? xhr = new XMLHttpRequest() : xhr = new             
     ActiveXObject("Microsoft.XMLHTTP");

      // 2.绑定监听
      xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
              // 5.接收数据
              var res = xmlHttp.responseText
              console.log(res)
          }
      }

      // 3.请求方式,请求地址; true代表异步,false代表同步
      xmlHttp.open('GET', 'www.baidu.com', true)

      // 4.发送请求
      xmlHttp.send();
  }

JQuery请求数据

function ajax(){

        $.ajax({
            type:"get",//请求方式
            url:"js/area-json.json",//请求地址
            data:{
                //请求数据,json对象
            },
            dataType:"json",//更改传入的data数据为json对象
            // 请求成功时调用成功的函数
            success:function(data){ //形参名为data
                
                console.log(data);
               
                // var obj=JSON.parse(data);//将返回的字符串转换为json对象
                // console.log(obj);  
            }
        })    
}   

Ajax的状态值

readyState

描述:只读属性,用一个整数和对应的常量来表示XMLHTTPRequest请求所处的状态,一般会在onreadystatechange事件的回调函数中, 判断readystate的值,进而进行不同状态对应的值

状态值含义
0UNSENT 表示XMLHTTPRequest实例对象已经生成,但是open()还没有调用
1OPENED 表示send()方法还没有调用,任然可以使用setRequestHeader()方法
2HEADERS_RECEIVED 表示send方法已被调用,表示服务端已经收到请求头信息和客户端响应码已收到
3LOADING 表示正在接受服务器传来的body中的数据,如果responseText属性是text或者空字符串,responseText就会包含已经收到的部分信息
4

DONE 表示服务器数据已经完全接受,或者本次接收已经失败

 

 

Ajax的状态码

status

描述:http状态码

状态码说明
1请求收到,继续处理
2操作成功收到,分析、接受
3完成此请求必须进一步处理
4请求包含一个错误语法或不能完成
5服务器执行一个完全有效请求失败
100客户必须继续发出请求
101客户要求服务器根据请求转换HTTP协议版本
200交易成功
201提示知道新文件的URL
202接受和处理、但处理未完成
203返回信息不确定或不完整
204请求收到,但返回信息为空
205服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206服务器已经完成了部分用户的GET请求
300请求的资源可在多处得到
301删除请求数据
302在其他地址发现了请求数据
303建议客户访问其他URL或访问方式
304客户端已经执行了GET,但文件未变化
305请求的资源必须从服务器指定的地址得到
306前一版本HTTP中使用的代码,现行版本中不再使用
307申明请求的资源临时性删除
400错误请求,如语法错误
401请求授权失败
402保留有效ChargeTo头响应
403请求不允许
404没有发现文件、查询或URl
405用户在Request-Line字段定义的方法不允许
406根据用户发送的Accept拖,请求资源不可访问
407类似401,用户必须首先在代理服务器上得到授权
408客户端没有在用户指定的饿时间内完成请求
409对当前资源状态,请求不能完成
410服务器上不再有此资源且无进一步的参考地址
411服务器拒绝用户定义的Content-Length属性请求
412一个或多个请求头字段在当前请求中错误
413请求的资源大于服务器允许的大小
414请求的资源URL长于服务器允许的长度
415请求资源不支持请求项目格式
416请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500服务器产生内部错误
501服务器不支持请求的函数
502服务器暂时不可用,有时是为了防止发生系统过载
503服务器过载或暂停维修,宕机
504关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505服务器不支持或拒绝支请求头中指定的HTTP版本

Ajax的请求头

Request 部分 | Http Header

Header解释示例
Accept指定客户端能够接收的内容类型

                                Accept: text/plain, text/html

Accept-Charset浏览器可以接受的字符编码集。Accept-Charset: iso-8859-5
Accept-Encoding指定浏览器可以支持的web服务器返回内容压缩编码类型。Accept-Encoding: compress, gzip
Accept-Language浏览器可接受的语言Accept-Language: en,zh
Accept-Ranges可以请求网页实体的一个或者多个子范围字段Accept-Ranges: bytes
AuthorizationHTTP授权的授权证书Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cache-Control指定请求和响应遵循的缓存机制Cache-Control: no-cache
Connection表示是否需要持久连接。(HTTP 1.1默认进行持久连接)Connection: close
CookieHTTP请求发送时,会把保存在该请求域名下的所有cookie值一起发送给web服务器。Cookie: $Version=1; Skin=new;
Content-Length请求的内容长度Content-Length: 348
Content-Type请求的与实体对应的MIME信息Content-Type: application/x-www-form-urlencoded
Date请求发送的日期和时间Date: Tue, 15 Nov 2010 08:12:31 GMT
Expect请求的特定的服务器行为Expect: 100-continue
From发出请求的用户的EmailFrom: user@email.com
Host指定请求的服务器的域名和端口号Host: www.zcmhi.com
If-Match只有请求内容与实体相匹配才有效If-Match: “737060cd8c284d8af7ad3082f209582d”
If-Modified-Since如果请求的部分在指定时间之后被修改则请求成功,未被修改则返回304代码If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT
If-None-Match如果内容未改变返回304代码,参数为服务器先前发送的Etag,与服务器回应的Etag比较判断是否改变If-None-Match: “737060cd8c284d8af7ad3082f209582d”
If-Range如果实体未改变,服务器发送客户端丢失的部分,否则发送整个实体。参数也为EtagIf-Range: “737060cd8c284d8af7ad3082f209582d”
If-Unmodified-Since只在实体在指定时间之后未被修改才请求成功If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT
Max-Forwards限制信息通过代理和网关传送的时间Max-Forwards: 10
Pragma用来包含实现特定的指令Pragma: no-cache
Proxy-Authorization连接到代理的授权证书Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Range只请求实体的一部分,指定范围Range: bytes=500-999
Referer先前网页的地址,当前请求网页紧随其后,即来路Referer: http://www.zcmhi.com/archives/71.html
TE客户端愿意接受的传输编码,并通知服务器接受接受尾加头信息TE: trailers,deflate;q=0.5
Upgrade向服务器指定某种传输协议以便服务器进行转换(如果支持)Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11
User-AgentUser-Agent的内容包含发出请求的用户信息User-Agent: Mozilla/5.0 (Linux; X11)
Via通知中间网关或代理服务器地址,通信协议Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)
Warning关于消息实体的警告信息Warn: 199 Miscellaneous warning

Responses 部分 | Http Header

Header解释示例
Accept-Ranges表明服务器是否支持指定范围请求及哪种类型的分段请求Accept-Ranges: bytes
Age从原始服务器到代理缓存形成的估算时间(以秒计,非负)Age: 12
Allow对某网络资源的有效的请求行为,不允许则返回405Allow: GET, HEAD
Cache-Control告诉所有的缓存机制是否可以缓存及哪种类型Cache-Control: no-cache
Content-Encodingweb服务器支持的返回内容压缩编码类型。Content-Encoding: gzip
Content-Language响应体的语言Content-Language: en,zh
Content-Length响应体的长度Content-Length: 348
Content-Location请求资源可替代的备用的另一地址Content-Location: /index.htm
Content-MD5返回资源的MD5校验值Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==
Content-Range在整个返回体中本部分的字节位置Content-Range: bytes 21010-47021/47022
Content-Type返回内容的MIME类型Content-Type: text/html; charset=utf-8
Date原始服务器消息发出的时间Date: Tue, 15 Nov 2010 08:12:31 GMT
ETag请求变量的实体标签的当前值ETag: “737060cd8c284d8af7ad3082f209582d”
Expires响应过期的日期和时间Expires: Thu, 01 Dec 2010 16:00:00 GMT
Last-Modified请求资源的最后修改时间Last-Modified: Tue, 15 Nov 2010 12:45:26 GMT
Location用来重定向接收方到非请求URL的位置来完成请求或标识新的资源Location: http://www.zcmhi.com/archives/94.html
Pragma包括实现特定的指令,它可应用到响应链上的任何接收方Pragma: no-cache
Proxy-Authenticate它指出认证方案和可应用到代理的该URL上的参数Proxy-Authenticate: Basic
refresh应用于重定向或一个新的资源被创造,在5秒之后重定向(由网景提出,被大部分浏览器支持)Refresh: 5; url=http://www.atool.org/httptest.php
Retry-After如果实体暂时不可取,通知客户端在指定时间之后再次尝试Retry-After: 120
Serverweb服务器软件名称Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
Set-Cookie设置Http CookieSet-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
Trailer指出头域在分块传输编码的尾部存在Trailer: Max-Forwards
Transfer-Encoding文件传输编码Transfer-Encoding:chunked
Vary告诉下游代理是使用缓存响应还是从原始服务器请求Vary: *
Via告知代理客户端响应是通过哪里发送的Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)
Warning警告实体可能存在的问题Warning: 199 Miscellaneous warning
WWW-Authenticate表明客户端请求实体应该使用的授权方案WWW-Authenticate: Basic

 

标签:what,请求,ajax,Content,Ajax,AJAX,服务器,客户端
来源: https://blog.csdn.net/Wsh20210301/article/details/117598421

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有