AJAX笔记

2019独角兽企业重金招聘Python工程师标准>>>

【xhr.readyState】

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

【AJAX标准写法】(记忆)

// 创建xhr
    if(window.XMLHttpRequest){            //  5种判断方式（window,typeof,try-catch,in,判断浏览器）
        var xhr = new XMLHttpRequest();
    } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
// 连接
    xhr.open("get",url,true);
// 发送
    xhr.send();
// 接收
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
            alert(xhr.responseText);    // 返回文本内容
        } else {
            alert(xhr.status)        // 如果前面有错误则返回404
        }
        }
    }

【jsonp封装注意地方】(url,data,cbName,success,error,timeout)

function jsonp(options){
    options = options || {};
    
    if(!options.url) return;
    options.data = options.data || {};
    options.cbName = options.cbName || "cb";   // 不同的搜索引擎的回调函数不一样 百度 "cb" 360 "callback"
    options.timeout = options.timeout || 0;
    
    var fnName = ("jsonp_" + Math.random()).replace(".","");   // 给回调函数添加随机因子
    
    var arr = [];
    options.data[options.cbName] = fnName;     // 添加回调函数
    for(var name in options.data){
        arr.push(name + "=" + encodeURIComponent(options.data[name]));
    }
    var str = arr.join("&");
    
    //2 全局函数
    window[fnName] = function(json){    // window[fnName]为全局函数，局部函数声明全局变量用window好维护
                        // 这里的json，是fnName这个回调函数返回过来的数据（默认）
    
        options.success && options.success(json);
        window[fnName] = null;        // 把函数清空，释放内存，减少浏览器性能的消耗
        oHead.removeChild(oS);        // 每次调用全局函数，清除head头里面的script标签
        clearTimeout(timer);
    };
    
    //1 创建script
    var oS = document.createElement("script");
    oS.src = options.url + "?" + str;
    var oHead = document.getElementsByTagName("head")[0];
    oHead.appendChild(oS);
    
    if(options.timeout){
        var timer = setTimeout(function(){
            options.error && options.error();
            window[fnName] = function(){};        // 接受超时，要把全局函数赋值为空函数，不然会报错
            oHead.removeChild(oS);
        },options.timeout);
    }
}

【ajax的上传方式get post】
1、 get : 有缓存    post : 没缓存（相对安全，信息不会暴露在地址栏）

【表单】(刷新整个页面)
1、表单三要素   （一）action:地址 （二）name:上传的名字  （三）value:上传的值

2、method ---------  get:  数据在地址栏上显示   不安全  32K   
             post:  数据隐藏        相对安全    1G

【缓存问题】
1、缓存： 浏览器对同一个的地址只会访问一次，再次加载也是重新记录上一次的东西 （IE缓存严重）

   解决： 让地址不一样     -----------------------（1）添加随机数   t=Math.random();
               -----------------------（2）时间戳 new Date().getTime();

【try catch】(一般不用，性能差)
1、try{
    // 可能出错代码
   } catch(e){
    // 补救代码
   }

    catch里的e参数  必须有，获取报错信息

【typeof特殊用法】12.22

1、  

 console.log(a)           // 报错
    console.log(typeof a);     // 返回undefine，但不报错

*************用于兼容判断IE，不报错

2、（面试）

console.log(typeof (typeof a))    //   string 

【后台文件传过来的json的一些注意事项】
1、后台传输过来的数据一定是string类型，如果要通过JS接收后台数据就要转换指定的类型  eval('('+json+')'); (jq方法接收数据不能用eval，不然会报错)

JSON.parse(json字符串)】
2、AJAX解析后台资源，通过JSON.parse（）转换  等同于  eval("("+json+")")，后者动态函数，要做赋值操作，不然报错;

json转string】
    2、JSON.stringify(json);     (固定写法)但不兼容IE 6 7

json转num】
    3、eval('('+json+')');       // 因为json是大括号包着，但有大括号系统会去寻找上边的是否缺少东西如是否缺少for function if等语句，会报错
                          // 所以要在json外面添加（json）

json标准格式】
    4、  属性名必须是双引号，值如果是字符串也要双引号，但如果要用单引号的话，外面要用转义字符/'abc/'

【undefined 和 not defined】
1、    undefined是JavaScript语言中定义的五个原始类中的一个，换句话说，undefined并不是程序报错，而是程序允许的一个值。

    not defined是javascript在运行我们的javascript代码时，遇到没有定义就用来运算的变量或者变量是个方法时报出来的错误。

【编码方式】
1、编码  encodeURIComponent('str')'   中文编码成ASCII码

1、解码  decodeURIComponent('%21%323%234')'   

    地址栏里面只能是ASCII编码组成，如果有中文要进行编码操作

【HTTP状态码】 三个数字组成 第一位代表类型

1XX 请求已经接受，正在处理
2XX 成功
3XX 重定向  （3以内只有304成功（第二次打开浏览器，会把自己第一次的缓存与服务器相关的东西的最后修改时间进行对比，如果相等就返回304））
4XX 错误        --------->前台错误
5XX 服务器错误        --------->后台错误  （503错误，服务器超载，内存被塞满，例子：12306太大访问量，就会出现503错误）

【eval】
1、标准格式  eval("("+str+")")

【replace】
1、字符串替换    str.replace("被替换的字符串"，"替换者")

【80端口】
1、所有网页都默认是80端口

【jsonp】
1、JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

写法：1、创建一个script标签
      2、定义一个全局函数

跨域:只要域名 端口 协议任意一个不同就算跨域  （后台不存在跨域问题，只有前台）前端跨域时，数据必须有名接受，没名字的数据前端拿不了，只能通过后台中转

网址的组成:

 http://  www       .520it     .com      :80    /index.html
 协议     二级域名  一级域名   域名后缀  端口    资源地址

ajax跨域解决方法（逐步深入理解跨域实现原理）
1. Script的src方式加载js文件（script可以引入任意的文件(通过script引入地址的方式获取其他服务器上的信息)）
2. 加载的js文件内进行函数调用
3. 数据以函数参数的形式传递
4. 回调函数中获取参数数据（回调函数就是下面的show把json的东西返回给页面）

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&cb=show

wd: word 关键字
cb: callback 回调函数

<img>标签的src不用通过appendChild() 就可以访问src地址
<script>等其他标签  都不能 必须添加

【ajax与jsonp是两回事】

【window a】
1、  在局部函数内定义全局变量  用window去定义，在局部函数里这样写容易维护

(前提要调用局部函数，才会产生全局变量)

*************************************************************************************

2、 eg

function a(){
  var b = 3;        var 一直为局部变量
  console.log(b);
}
a();  
console.log(b);         //最后打印1,然后报错

 

function a(){
  window.b = 3;        window.b 要调用后才能为全局变量
  console.log(b);
}
a();  
console.log(b);    //最后打印1,1

function a(){
  window.b = 3;        window.b 要调用后才能为全局变量
  console.log(b);
}
console.log(b);
a();  
console.log(b);        //最后报错

【绑定】(绑定多个事件)
（false：代表冒泡    true：代表捕获   （浏览器事件流就是指冒泡，捕获））
1、obj.addEventListener("事件名"，函数,false)     // IE 9+ 

    eg: document.addEventListener("click",fn,false);

2、obj.attachEvent("onclick",fn)    // IE 6 7 8

【网络延时】（onload 是 window img script的属性）
1、可以用obj.onload方法去包裹需要服务器返回的数据，但不兼容IE   ("onload" in obj)  判断兼容方法

    IE用obj.onreadystatechange

2、因为JS是先加载页面的标签和图片后再执行 JS代码， 如果window.onload = function(){ img.onload = function(){console.log(1);}};

    *********************不会读取到console.log(1); 

【浏览器默认行为与绑定解绑事件的混合使用】（详看ajax第四天）
1、event.preventDefault    和  return false   都可以取消默认行为

【事件委托】（提高效率，不用循环多次）
1、原理：冒泡   （给对做事件的元素的最大父亲添加对应事件,点击子元素弹出指定元素）
event.srcElement    兼容chrome ie
event.target         兼容chrome oz

var oSrc = event.srcElement || event.target    

【target事件和currentTarget】（看自己作品1228事件委托内含高级排他）
1、target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，
    两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

2、target.id  、 target.tagName

eg:

ul.onclick = function(e){
    var e = e || event;
    var oSrc = e.target;
    var oSrcTagName = e.target.tagName;

    console.log(e.target.tagName)   // 返回点击元素的标签名
    console.log(e.target)           // 指点击的元素
    console.log(e.currentTarget);   // 指ul

【AJAX是在浏览器和服务器之间架一层AJAX引擎作过滤，筛选】

转载于:https://my.oschina.net/u/2949632/blog/811535