Ajax笔记

2018-08-29 本文已影响6人 android小菜鸡一枚

什么事Ajax?

AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

创建步骤

创建一个异步对象
var xmlhttp = new XMLHttpRequest();
设置请求方式和请求地址
method:请求类型 GET 或 POST
url: 文件在服务器上的位置
async：true(异步) 或 false（同步）
xmlhttp.open("GET","get.php",true);
发送请求
xmlhttp.send();
监听状态的变化

xmlhttp.onreadystatechange = function() {
  // 0: 请求未初始化
  // 1: 服务器连接已建立
  // 2. 请求已接收
  // 3. 请求处理中
  // 4. 请求已完成,且响应已就绪
  if(xmlhttp.readystate === 4) {
    // 处理返回的结果
    if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
        //接收到服务器返回的数据
        xml.responseText;
    } else {
    
    }
  }
}

Ajax在IE中使用

var xhr;
if(window.XMLHttpRequest) {
  // code for IE7+，Firefox, Chrome, Opera, Safari
  xhr = new XMLHttpRequest();
} else {
  // code for IE6，IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

在IE浏览器中，如果通过Ajax发送GET请求，那么IE浏览器认为同一个URL只有一个结果，给URL添加一个参数就可以了xhr.open("GET","get.php?t="+ (new Date().getTime()),true);

ajax请求封装

/**
 *
 * @param data
 * @returns {string}
 */
// 将对象转换为字符串
function obj2str(data) {
    data.t = new Date().getTime();
    var res = [];
    for (var key in data) {
        // 在URL中是不可以出现中文的，如果出现了中文需要转码，可以调用encodeURLComponent
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
    }
    return res.join("&");
}

/**
 *
 * @param option
 */
function ajax(option) {
    var str = obj2str(option.data);
    var xmlhttp, timer;
    if(window.XMLHttpRequest) {
        // code for IE7+，Firefox, Chrome, Opera, Safari
        xmlhttp= new XMLHttpRequest();
    } else {
        // code for IE6，IE5
        xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (option.type.toLowerCase() === "get") {
        xmlhttp.open(option.type,option.url+"?"+str,true);
        xmlhttp.send();
    } else {
        xmlhttp.open(option.type,option.url,true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    xmlhttp.onreadystatechange = function() {
        // 0: 请求未初始化
        // 1: 服务器连接已建立
        // 2. 请求已接收
        // 3. 请求处理中
        // 4. 请求已完成,且响应已就绪
        if(xmlhttp.readystate === 4) {
            clearInterval(timer);
            // 处理返回的结果
            if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
                option.success(xmlhttp);
            } else {
                option.error(xmlhttp);
            }
        }
    }

    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function() {
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

// 调用
ajax({
  url:"",
  data:"",
  type:"",
  timeout:3000,
  success:function(xhr) {},
  error:function(xhr){}
})

post请求
必须放到oepn和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userName=zs&Pwd=321");

jQuery ajax

$.ajax({
  type:"GET",
  url:"",
  data:"userName=lnj&userPwd=123",
  success:function(msg){
    var obj = eval("("+msg+")");//处理非标准JSON字符串
    $.each(obj, function(key, value) {})
  },
  error:function(xhr){
    alert(xhr.status);
  }
})

在低版本的IE中，不可以使用原生的JSON.parse方法，可以使用json2.js框架来兼容
事件委托
$("body").delegate(".info",click,function(){});

cookie

cookie: 会话跟踪技术客户端
session: 会话跟踪技术服务端

cookie作用
将网页中的数据保存在浏览器中
cookie生命周期
默认情况下生命周期是一次会话(浏览器被关闭)
如果通过expires=设置了过期时间，并且过期时间没有过期，那么下次打开浏览器还是存在
如果通过expires=设置了过期时间，如果已经过期了，那么会立即删除保存的数据

var date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = "age=33;expires="+date.toGMTString()+";";

cookie注意点
cookie默认不会保存任何数据
cookie不能一次性设置多条数据，要想保存多条数据，只能一条一条的设置
cookie有大小和个数的限制
个数限制： 20~50
大小限制：4KB左右
cookie作用范围
同一个浏览器的同一个路径下访问
如果在同一个浏览器中，默认情况下下一级路径就可以访问
如果在同一个浏览器中，想让上一级目录也能访问保存的cookie，那么需要:
document.cookie = "name=zs;path=/;";那么需要添加一个path属性才可以。
封装cookie

/**
 * 添加cookie
 * @param key
 * @param value
 * @param day 过期时间
 * @param path
 * @param domain
 */
function addCookie(key,value,day,path,domain) {
    // 1.处理默认保存的路径
    var index = window.location.pathname.lastIndexOf("/");
    var currentPath = window.location.pathname.slice(0,index);
    path = path || currentPath;
    // 2.处理默认保存的domain
    domain = domain || document.domain;
    // 3.处理默认保存的domain
    if (!day) {
        document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
    } else {
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
    }
}

/**
 * 获取cookie
 * @param key
 * @returns {string}
 */
function getCookie(key) {
    var res = document.cookie.split(":");
    for(var i=0;i<res.length;i++) {
        var temp = res[i].split("=");
        if (temp[0].trim() === key) {
            return temp[1];
        }
    }
}

/**
 * 删除cookie
 * @param key
 */
function delCookie(key,path) {
    addCookie(key,getCookie(key),-1,path);
}

封装jquery.cookie.js

;(function ($,window) {
    $.extend({
        /**
         * 添加cookie
         * @param key
         * @param value
         * @param day 过期时间
         * @param path
         * @param domain
         */
        addCookie: function(key,value,day,path,domain) {
            // 1.处理默认保存的路径
            var index = window.location.pathname.lastIndexOf("/");
            var currentPath = window.location.pathname.slice(0,index);
            path = path || currentPath;
            // 2.处理默认保存的domain
            domain = domain || document.domain;
            // 3.处理默认保存的domain
            if (!day) {
                document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
            } else {
                var date = new Date();
                date.setDate(date.getDate() + day);
                document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
            }
        },

        /**
         * 获取cookie
         * @param key
         * @returns {string}
         */
        getCookie: function(key) {
            var res = document.cookie.split(":");
            for(var i=0;i<res.length;i++) {
                var temp = res[i].split("=");
                if (temp[0].trim() === key) {
                    return temp[1];
                }
            }
        },

        /**
         * 删除cookie
         * @param key
         */
        delCookie: function(key,path) {
            addCookie(key,getCookie(key),-1,path);
        }
    });
})(jQuery,window);

hash
用来记录页码
设置hash
window.location.hash = 3;
获取hash
window.location.hash.substring(1)

李南江亲授-jQuery+Ajax从放弃到知根知底

Ajax笔记

什么事Ajax?

创建步骤

jQuery ajax

cookie

猜你喜欢

热点阅读