zoukankan      html  css  js  c++  java
  • ajax详解

    1.ajax是一种在无需重新加载整个网页(刷新页面)的情况下,能够更新部分网页的技术

    ajax的优势

    1.无刷新更新数据

    更为迅捷地响应用户交互,减少用户等待时间

    2.异步与服务器通信

    ajax使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力,优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量

    3.前端和后端负载平衡

    ajax可以把以前一些服务器负担的工作转嫁到客户端,减轻服务器和带宽的负担,节约空间和带宽租用成本,减轻服务器负担,提升站点性能

    ajax其核心有JavaScript、XMLHttpRequest、DOM对象组成通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

    异步:同时执行,也叫并发

    同步:按步骤顺序执行,一条一条执行

    步骤:

    1.创建ajax对象

    2.连接服务器

    3.发送请求

    4.接收返回

    open方法:

    1.url是相对于当前页面的路径,也可以使用绝对路径

    2.open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送

    3.只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错

    请求状态监控:

    1.onreadystatechange(状态改变事件)

    readyState属性:请求状态

    0:请求未初始化(还没有调用open())

    1:请求已经建立,但是还没有发送(还没有调用send())

    2:请求已经发送,正在处理中(通常现在可以从响应中获取内容头)

    3:请求在处理中,通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成

    4:响应已经完成,可以获取并使用服务器的响应了

    status属性:请求结果(200代表成功,404代表失败)

    responseText属性:服务器发回的信息(文件中的内容)

    js解析JSON

    eval()方法

    function toJson(str){

         var json = eval('(' + str + ')');

         return json;

    }

    该方法存在性能和安全方面的问题,不建议使用

    JSON.parse()方法

    function toJson(str){

      return JSON.parse(str);

    }

    new Function方法

    function toJson(str){

         var json = (new Function('return' + str))();

         return json;

    }

    function ajax(url,fnWin,fnFaild){

        //创建ajax对象

        var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

        //连接服务器

        ajax.open("GET",url,true);

        //发送请求

        ajax.send();

        //接收返回

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){

                if(ajax.status == 200){

                    if(typeof fnWin == 'function'){

                        fnWin(ajax.responseText);

                    }

                }else{

                    if(typeof fnFaild == 'function'){

                        fnFaild();

                    }

                }

            }

        }

    }

  • 相关阅读:
    如何用JS判断身份证格式
    ELK+log4j笔记
    JQM进阶:page事件执行过程
    jqm入门页面及对话框
    windows下mongodb的安装
    Bootstarp相关类
    兼容性及相关问题总结
    浏览器加载和渲染html的顺序
    【转】关于top、clientTop、scrollTop、offsetTop等
    pl_sql操作--激活提升权限scott用户
  • 原文地址:https://www.cnblogs.com/twoeggg/p/8051956.html
Copyright © 2011-2022 走看看