AJAX笔记

【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】
一、 get : 有缓存    post : 没缓存（相对安全，信息不会暴露在地址栏）

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

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

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

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

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

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

【typeof特殊用法】12.22

一、  

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

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

二、（面试）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【80端口】
一、全部网页都默认是80端口

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

写法：一、建立一个script标签
      二、定义一个全局函数

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

网址的组成:

 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】
一、  在局部函数内定义全局变量  用window去定义，在局部函数里这样写容易维护

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

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

二、 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：表明捕获   （浏览器事件流就是指冒泡，捕获））
一、obj.addEventListener("事件名"，函数,false)     // IE 9+ 

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

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

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

    IE用obj.onreadystatechange

二、由于JS是先加载页面的标签和图片后再执行 JS代码， 若是window.onload = function(){ img.onload = function(){console.log(1);}};

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

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

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

var oSrc = event.srcElement || event.target    

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

二、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引擎做过滤，筛选】