zoukankan      html  css  js  c++  java
  • ajax的工作原理

    ajax的工作原理

    由于本人也是小白一枚,所以希望小伙伴在看的时候有什么要补充的或是哪里有错误都可以提出来,嘿嘿

    ajax定义

    ajax就是异步的JavaScript和xml,主要用于交互式网页的开发,它主要是由javascript、XMLHttpRequest组成的,其中核心部分就是XMLHttpRequest,他是在IE5中首先引入的,是一种支持异步请求的技术。简单的来说,就是js可以及时向服务器提出请求并处理响应,达到无刷新页面的效果。

    ajax的工作方式

    ajax先通过XMLHttpRequest向服务器端发送异步请求,从服务器获取到需要的数据,再用js操作DOM并时间更新页面,其中最重要的一步就是从服务器获取数据

    ajax的步骤

    (1)创建实例

    (2)打开地址

    (3)响应请求

    (4)发送请求

    1 var data=null;//用来存放请求到的数据
    2 var xhr=new XMLHttpRequest();
    3 xhr.open('get','url',true);//这里true表示异步,false表示同步
    4 xhr.onreadystate=function(){
    5     if(xhr.readystate==4&&xhr.statue==200){
    6           data=json.parse(xhr.responseText)
    7     }
    8 }
    9 xhr.send(null)

    ajax的优点

    (1)最大的优点就是实现局部刷新,提高了用户的体验效果

    (2)因为是‘按需请求数据’,所以减少了一些没有必要的交互过程,提高了响应的时间,也减少了服务器的负载

    (3)使用了异步的方式与服务器进行通信,没有打断用户的操作

    (4)是基于标准化并被支持的技术,不需要安装插件或者小程序

    ajax的缺点

    (1)对搜索引擎不友好

    (2)导致浏览器后退功能的退化

    (3)安全问题,ajax数据请求就如同对企业数据建立了一个请求通道,完全的把这个接口暴露了

    (4)破坏程序的异常机制,当程序发生了异常,增大了调试的难度

    ajax的设计原理

    ajax就相当于在用户操作于服务器端之间建了一个隔层,当我们需要向服务器端请求数据的时候,就会有ajax引擎将请求传递到服务器端

    ajax的状态值

    0:创建一个XMLHttpRequest对象

    1:用open打开与服务器的链接

    2:获取到响应头的信息

    3:响应主体正在加载

    4:响应主体加载完成

    ajax的状态码

    当然有很多了,但是常用的只有这几个

    200:成功

    301:永久重定向

    302:临时重定向

    304:读取缓存文件

    400:传递参数有误

    401:没权限

    404:找不到文件

    500:服务器未知错误

    503:服务器超负荷运行

    ajax接受的数据类型

    HTML、XML、JSON

  • 相关阅读:
    基本算法 st
    winServer服务器设置多用户同时远程访问!
    类的实例化顺序
    基于layui的数据列表展示数据中template的作用。使得日期等数据符合预期进行展示
    基于layui的laydate,在加载后台数据时laydate.render()不起作用。
    微信企业号两种常用搜索加载方式
    Docker搭建私有仓库registry
    第7章 Dockerfile详解
    第6章 docker数据管理
    第5章 Docker的四种网络模式
  • 原文地址:https://www.cnblogs.com/yang-xiao-fan/p/6825428.html
Copyright © 2011-2022 走看看