ajax

作者: 六月太阳花 | 来源:发表于2017-01-02 21:35 被阅读91次

1、注意:
1)返回值,都是字符串
2)缓存
用url缓存
https://www.baidu.com?wd=123
https://www.baidu.com
解决:在URL身上加一个随机数作参数,导致每次请求 URL,都是不一样的
t = Math.random();// 随机因子
3)乱码:
你自己的文件 和 请求的文件 编码不一致导致
解决: 保持一致
4)不关心后缀
习惯: .json .data
2、ajax工作流程
1)创建一个ajax对象
var oAjax = new XMLHttpRequest();
var oAjax = new ActiveXObject('Microsft.XMLHTTP');
if(window.XMLHttpRequest)
2)oAjax.open('GET',url,true);
GET.请求方式
url.请求地址
true.是否异步
3)oAjax.send();
4)接收
oAjax.onreadystatechange = function(){
oAjax.reasyState == 4 //完成 通信息状态
oAjax.status>=200 && oAjax.status<300 || oAjax.status == 304
//304 没有修改
成功
};
3、oAjax.readyState 通信状态,只读的,不能修改(赋值)
0 UNSEND ajax对象已经准备完毕,但是还没有打开连接
1 OPENDED 已经打开连接(建立好连接)
2 HEADERS-RECEVICED 发送请求完毕,头部信息也接收完毕了
3 LOADING 下载内容(接收内容)
4 DONE 操作完毕
4、http状态码:
200 OK
302 Move temporarily 重定向
304 Not Modified

403 Forbidden
404 Not Found
405 Method Not Allowed
414 Request-URI Too Long

500 Internal Server Error 后台代码写问题
502 Bad Gateway
eg:

function json2url(json){
    json.t = Math.random();
    var arr = [];
    for(var name in json){
        arr.push(name+'='+json[name]);
    }
    return arr.join('&');
}
/*
* url:请求地址
* data:提交数据、参数
* time:超时时间
* type: get  post
* success:fn
* error:fn
* */
function ajax(json){
    var json = json || {};
    if(!json.url){
        alert('请给出url地址');
        return;
    }
    json.data = json.data || {};
    json.time = json.time || 1000;
    json.type = json.type || 'GET'; 
    //1.ajax对象  request:请求  response:响应
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }
    else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //2.建立连接
    switch (json.type.toLowerCase()){
        case 'post':
            oAjax.open('POST',json.url,true);
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置一个请求头

            oAjax.send(json2url(json.data));
            break;
        case 'get':
            oAjax.open('GET',json.url+'?'+json2url(json.data),true);
            //3.打开连接
            oAjax.send();
            break;
    } 
    //加载中
    json.fnLoading && json.fnLoading(); 
    //4.接收
    var timer = null;
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState == 4){
            //完成
            clearTimeout(timer);
            json.complete && json.complete();

            if(oAjax.status >= 200 && oAjax.status<300 || oAjax.status == 304){
                //成功
                json.success && json.success(oAjax.responseText); 
            }
            else{
                json.error && json.error(oAjax.status);
            }
        }
    }; 
    timer = setTimeout(function(){
        alert('你的网速太慢了,别等了!');
        oAjax.onreadystatechange = null;
    },json.time); 
}

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

    本文标题:ajax

    本文链接:https://www.haomeiwen.com/subject/edzsvttx.html