• 浅谈ajax


    一、什么是ajax?

    AJAX(Asynchronous Javascript And XML)译为异步的JavaScript和XML。通过XMLHttpRequest创建对象,向服务器发送异步请求,从服务器获取数据,然后用js操作DOM从而更新页面。其中最关键的一步就是从服务器获取请求数据。

    二、ajax的请求步骤

     1 //创建异步对象
     2 var xhr = new XMLHttpRequest();
     3 
     4 //确定发送请求的方式、地址和是否异步(true表示异步),get请求的参数写在地址后面,格式为test.php?id=1&name=zat
     5 xhr.open('get', 'test.php', true);
     6 
     7 //发送post请求
     8 //xhr.open('post', 'test.php', 'true');
     9 //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    10 
    11 //发送请求
    12 xhr.send();
    13 
    14 //发送post请求,带有参数
    15 //xhr.send('name=zat&age=18');
    16 
    17 //检测服务器是否把数据返回
    18 xhr.onreadystatechange = function(){
    19     if(xhr.readyState == 4){
    20          if(xhr.status == 200){
    21             alert(xhr.responseText);
    22         }else{
    23             alert('出错了,err :' + xhr.status);
    24         }  
    25     }
    26 }    

    三、ajax的5种工作状态

    readyState:

    0(未初始化)对象已经创建,但是尚未初始化,还没调用open方法。

    1(初始化)对象已经初始化,并且调用open方法,但还未调用send方法。

    2(发送数据)调用send方法,但是正在等待状态码和头的返回。

    3(正在接收)已经接收部分数据,因为响应和http头不完整,所以还不能使用该对象的属性和方法。

    4(完成)数据接收完成,此时可以通过responseText和responseXML获取完整的响应数据。

    四、http状态码

    http状态码由三位数构成,首位数字定义了状态码的类型。

    1xx:信息类,web请求正在进一步处理;

    2xx:200表示返回成功;

    3xx:304表示已经缓存请求;

    4xx:404表示访问的页面不存在;

    5xx:表示服务器错误。

    五、ajax优缺点

    (1)ajax优点

    1. 最大的优点是使用异步的方式与服务器通信,达到不用刷新页面也能与服务器通信,不需要打断用户的操作,用户体验好,响应能力快;
    2. 可以把以前一些服务器的工作转嫁给客户端,利用客户端闲置能力进行处理,减轻服务器和带宽的压力,节约空间和宽带的租用成本;
    3. ajax是基于标准化的并且被广泛支持的技术,不需要下载插件和小程序。

    (2)ajax缺点

    1. ajax干掉了back和history功能,所以对浏览器机制造成了破坏;
    2. 安全问题:
      • ajax技术如同对企业数据建立了一个直接通道,这使开发者在不经意间会暴露比之前更多的数据和服务器逻辑;
      • ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击;
      • ajax也难以避免一些已知的安全弱点,诸如SQL注入攻击等。
    3. 对搜索引擎支持较弱,如果ajax使用不当,会增大网络数据流量,降低整个系统的性能;
    4. 破坏程序的异常处理机制。

    六、传输的数据是明文还是暗文?

    ajax的get和post方式请求数据都是明文。

  • 相关阅读:
    Axios 各种请求方式传递参数格式
    axios POST提交数据的三种请求方式写法
    Json对象和Json字符串的区别
    ASP.NET Core 使用 AutoFac 注入 DbContext
    asp.net core signalr Error: Failed to start the transport 'WebSockets': null
    js中settimeout和setinterval的区别是什么?
    VS IDE开发字体推荐
    .net core ef core 自动迁移,自动修改数据库
    localstorage和sessionstorage的区别
    TinyOS编程
  • 原文地址:https://www.cnblogs.com/sup9278/p/6085541.html
Copyright © 2020-2023  润新知