zoukankan      html  css  js  c++  java
  • 原生ajax相关概念

    1、ajax 
    异步的JavaScript and xml  用来和服务器进行数据的交互
    当向服务器提交少量数据时 , 使用ajax实现  可以提高程序的执行效率  提高用户体验  减少带宽
    作用 : 页面无刷新 (局部刷新)
     
    2、ajax工作原理
     
    3、异步和同步
    异步现象 : 定时器   事件    回调函数    ajax
    var num = 10;
    setTimeout(function(){
        num = 20
        console.log( num )
    },1000)
    num = 30
    console.log( num )
     
     
    for( var i = 1 ; i <= 5 ; i++ ){
        setTimeout( function(){
            console.log( i )
        },1000 )
    }
     
    异步 :  同时分开执行   (生活中的同步)   非阻塞模式   
    同步 :  按顺序执行        (生活中的异步)  阻塞模式
     
     
    4、ajax操作步骤
    ①创建ajax对象 
        var xhr = null;
          if( XMLHttpRequest ){
              xhr = new XMLHttpRequest();
          }else{
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
    ②建立和服务器的连接
    open( "get/post" , 请求文件路径 url , 布尔值 )
    第三个参数 : 表示同步  / 异步 true 默认
    get和post区别 : 
    get 路径传值  数据对用户是可见的   传递的数据量少   安全性低   便于调试   
    post 非路径传值  数据对用户是不可见的  传递的数据量大 安全性高   
    ③发送请求 
    send() 
     
    ④服务器响应客户端的结果  (返回结果)
    使用状态改变事件 onreadystatechange  处理服务器返回的结果
    状态值 readyState 
    0  请求还没有初始化  还没有open()
    1  请求已发送   服务器还没有开始处理
    2    服务器接收请求后 没有处理数据
    3    开始处理请求 部分请求已完成
    4    所有请求全部完成
     
    状态码 :status
    200  交易成功
    404  文件路径错误
    500  服务器错误
    400  服务器语法错误
     
    服务器响应客户端请求时需要注意的两个问题 : 
    1、状态值判断
    2、状态码的判断
     
    5、解决ie的中文编码  当向服务器传递中文时,需要通过 encodeURI()方法 对中文进行编码处理
     
    6、ajax中的缓存
    当多次请求服务器上的同一个文件时,如果路径不变,后面的多次请求直接从浏览器的缓存上获取数据
    导致 当服务器的数据发生更改时,无法拿到服务器更新后的数据
    解决方案一 : 
    在路径上加一个可变的参数
    url ? id = Math.random()
    url ? id = new Date().getTime()
     
    解决方案二 :  比较服务器上文件的最后修改时间
    当使用ajax请求服务器数据时,会将服务器文件最后一次的修改时间发送到服务器上
    比较服务器文件两次的修改时间
    如果相等  直接从浏览器的缓存上获取数据
    如果不相等, 先删除浏览器缓存的数据 在获取服务器上更新后的数据
    xhr.setRequestHeader("if-modified-since","0"); 设置文件修改时间
     
    7、字符串和对象的转换问题
    原生ajax获取服务器的数据 是字符串
    字符串转对象 : JSON.parse()
    对象转字符串 : JSON.stringify()  cookie中使用
     
    8、接口
    接口 : 后台程序员为前端提供的一个路径url
    接口信息 : 
    1、接口路径
    2、接口路径上是否有参数
    3、接口返回值
    例如 : 
    接口url:   http://10.9.47.180/ajax1824/checkName.php   
    接口参数 :  uname  用户名
    接口返回值 : 
        1--可以使用
        0--被占用
     
    举例:
    登录注册接口:
    url :    http://10.9.47.180/ajax1824/reg_login.php
    参数 : 
         status (login 登录    register 注册)
         email  邮箱
         pwd 密码
     
    返回值 : 
        登录功能 : 
            1--登录成功
            0--密码错误
            2--用户名不存在
     
        注册功能
            1--注册成功
            0--注册失败
     
     
    9、ajaxPost
    从服务器获取数据   同get
    向服务器发送数据时  需要设置请求头   ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
    (ajax使用post提交数据需要设置请求头)
     
    10、同源策略
    同源 :同一个来源  , 协议  域名  端口号
     
    http://localhost:80  
    http://localhost:8020
     
    同源策略 是浏览器的一个最基本的安全机制 , 为了保证用户数据的安全
     
    当使用ajax请求服务器数据时,需要保证 协议  域名 和端口号要和ajax请求的路径保持一致 
    因此ajax受 同源策略的影响 不能跨域(会有解决跨域的方法,在下一篇会列举)
     
     
    11、promise对象  (ajax封装,使用promise对象)
     promise :承诺   构造函数
     promise对象的三个状态 : 
     pending 进行中
      resolved  已解决  
      rejected  失败
    promise对象承诺执行成功后,会自动执行then方法  then方法第一个参数表示成功后执行参数,第二个参数表示失败后执行的参数(一般都不写catch都用then的第二个参数)
    失败后还有可能会执行catch方法
    promise对象的状态一旦发生改变 就不可逆
     
    ajax封装
    function ajaxGet(url,callback){
        var xhr = null;
        if( window.XMLHttpRequest ){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.open("get",url);
        xhr.send();
        
        xhr.onreadystatechange = function(){
            if( xhr.readyState==4 && xhr.status == 200 ){
                //服务器返回的数据  var res =  xhr.responseText;
                //当得到服务器返回的结果后  处理的功能是可变 
                callback(xhr.responseText);
            }
        }
    }
    //ajax封装 使用promise对象
    function ajaxPromise(url){
        var pro = new Promise(function(succ,failed){
            var ajax = new XMLHttpRequest();
            ajax.open( "get" , url );
            ajax.send();
            ajax.onreadystatechange = function(){
                if( ajax.readyState == 4 && ajax.status == 200 ){
                    //成功了 ajax.responseText
                    succ(ajax.responseText);//通知promise对象ajax请求服务器的数据成功了
                }
            }
            //承诺多久后如果没有通知promise对象成功  就通知失败
            setTimeout( function(){
                failed("请求服务器失败");
            },5000 )
        })
        
        return pro;
    }
  • 相关阅读:
    18 个 Java8 日期处理的实践,太有用了!
    IntelliJ IDEA 2019.3安装激活破解使用教程
    低收入人员如何打造自己核心竞争优势
    关于企业网络营销的实战步骤
    关于如何做好微信营销和QQ营销的心得
    百度竞价项目的一些简要说明
    ASO是什么?AppStore搜索规则是什么?
    如何选择APP推广渠道和推广技巧
    浅析Hibernate映射(二)——关系映射(3)
    浅析Hibernate映射(二)——关系映射(4)
  • 原文地址:https://www.cnblogs.com/cqdd/p/10304445.html
Copyright © 2011-2022 走看看