• Ajax实现异步请求


    基本步骤:创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应

    ajax 通俗讲有四个步骤

    1.创建Ajax对象
    2.链接到服务器
    3.发送请求
    4.接受返回值

    1.创建对象
      var xhr = null;
        if(window.XMLHttpRequest){
            标准浏览器
            xhr = new XMLHttpRequest();
        }else{
            非标准浏览器IE6/7/8
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

    对于前面要在if中加window判断是因为,浏览器会对未定义值的变量读取时报错 ,而对于window.variable不会报错,而是报undefined.

    2.连接服务器

    首先理解同步与异步
    同步:事情一件一件来
    异步:多件事情一起做
    而ajax就是为了异步而生的,例如用户请求表单后,提交到服务器的过程,用户不用等待,可以干别的事情。。。。。。

       var type = 'get';
        var myurl = './data.php';
        var async = false;//第三个参数默认值就是true,表示异步;false表示同步
        xhr.open(type,myurl,async);
    3发送请求
    //发送请求
     var param = null;
      xhr.send(param);
    4.接受请求

    主要是判断浏览器和服务器的交互进度和结果

            xhr.onreadystatechange=function(){
                //oAjax.readyState浏览器和服务器的交互情况
                if(oAjax.readyState == 4)//读取完成
                {
                    if(oAjax.status==200)//http状态码,用来判断是否成功接受并返回文件
                    {
                        alert(oAjax.status+" Success" +oAjax.responseText);//读取响应文件里面的TEXT
                    }else{
                        alert(oAjax.status+" NotFound");
                    }
                }
            };

    A、处理响应中的status (xhr.status == 200 ):

    xhr.status是http协议的状态码:200成功、404没有找到资源、500服务器报错

    ajax清除缓存:

        //将文件名设置随系统时间改变而改变,这样可以避免浏览器缓存旧数据
        oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);

    B、XMLHttpRequest取得响应:

    (1)responseText:获得字符串形式的响应数据

    (2)responseXML:获得xml形式的响应数据

    (3)status和statusText:以数字和文本形式返回Http转态码

    (4)getAllResponseHeader():获得所以得响应报头

    (5)getResponseHeader():查询响应中的某个字段的值

    (6)readState属性

    "0"请求未初始化,open还未调用

    "1":服务器连接已经建立,open已调用

    "2":请求已接收,也就是接收到头信息了

    "3":请求处理中,也就是接收到响应主体了

    "4":请求已经完成,且响应就绪,响应完成了

    C、注意事项:

        1、xhr的对象创建需要兼容处理
        2、xhr.open的3个参数的作用
        3、xhr.readyState状态值要了解
        4、通过xhr.responseText获取服务器响应的数据
        5、对于get请求来说,xhr.send()的参数固定写成null
        6、xhr.status和xhr.readyState的作用和区别

    D、阻止表单提交的几种方式:

     1.return false;
     2.e.preventDefault();
     3. <input type="submit" value="提交" id="btn">把“submit”换成“button”

    E、Ajax-get提交:

    Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
    xhr.send();方法参数固定为null
    2.配置发送函数
                encodeURI作用对get参数进行编码处理,防止乱码
                var param = encodeURI('?username='+uname+'&password='+pw);
                xhr.open('get','./data.php'+param);
    3.发送
                xhr.send(null);

    F、Ajax-post提交:

    Ajax的post提交方式通过xhr.send();
    函数传递的参数发送数据,而不是通过url传递数据
    post提交方式必须设置请求头
    post提交的数据不需要进行编码处理
    2.配置发送函数
                   xhr.open('post','./33data.php');
                   //设置请求头信息(对于post提交必须设置请求头)
                   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
    3.发送
                   var param = 'username='+uname+'&password='+pw;
                   xhr.send(param);

    G、post和get的区别:

    get post
    2.配置发送函数
                encodeURI作用对get参数进行编码处理,防止乱码
                var param = encodeURI('?username='+uname+'&password='+pw);
                xhr.open('get','./data.php'+param);
    3.发送
                xhr.send(null);
    2.配置发送函数
                   xhr.open('post','./33data.php');
                  设置请求头信息(对于post提交必须设置请求头)
                   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    3.发送
                   var param = 'username='+uname+'&password='+pw;
                   xhr.send(param);
     
    1、Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
    2、xhr.send();方法参数固定为null
    1、Ajax的post提交方式通过xhr.send();
    函数传递的参数发送数据,而不是通过url传递数据
    2、post提交方式必须设置请求头(   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); )
    3、post提交的数据不需要进行编码处理

    H、HTTP请求:是一种规则,无状态,无记忆:

      HTTP请求过程

    (1)建立TCP连接

    (2)web浏览器向web服务器发送请求指令

    (3)web浏览器发送请求头信息

    (4)web服务器应答

    (5)web服务器发送应答头信息

    (6)web服务器向浏览器发送数据

    (7)web服务器关闭TCP连接

    I、HTTP请求的4个·组成部分:

        a、HTTP请求方法或者动作(GET/POST)

         b、正在请求的URL

         c、请求头,包含客户环境信息、身份信息等

         d、请求体(正文),包含客户提交的查询字符串信息、表单信息

    J、POST和GET方法:

         GET:(1)用于信息获取

                   (2)使用URL传递参数

                    (3)String<=2000个字符左右

         POST:(1)用于修改服务器上的资源

                     (2)String<=无穷大

    K、一个HTTP响应由三个部分组成:

           a、一个数字和文字组成的转态码。作用:显示请求是否成功

           b、响应头,包含服务器类型、日期、内容类型、长度等

           c、响应体,即响应正文,字符串、HTML等

    L、HTTP状态码由3个数字构成,其中首位数字定义了状态码的类型:

        1^^:信息类,表示收到web请求,正在进行处理中

        2^^:成功,表示用户请求被正确接收、理解和处理,如200

        3^^:重定向,表示请求未成功,客户必须采取动作

        4^^:客户端错误,客户提交的信息有误,如400

        found:意味着请求中所引用的文档不存在

        5^^:服务器错误(最难处理的问题),表示服务器不能完成请求处理,如500

  • 相关阅读:
    转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
    转:requirejs打包压缩r.js使用示例
    转: RequireJS Optimizer 的使用和配置方法
    转:requirejs:让人迷惑的路径解析(~~不错)
    转: requirejs中文api (详细)
    转: 让html5标签在ie8及以下的被正确解析的解决方案
    浏览器对body节点scrollTop解析的差异
    vue全局配置
    vue watch 深度监听以及立即监听
    Vue插件
  • 原文地址:https://www.cnblogs.com/web-record/p/10298832.html
Copyright © 2020-2023  润新知