博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax基础知识
阅读量:4501 次
发布时间:2019-06-08

本文共 2711 字,大约阅读时间需要 9 分钟。

1.   什么是Ajax ?

a)   无刷新的从服务器上读取数据;意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新;

2.   关于浏览器缓存:

a)   缓存机制:根据地址来缓存,同样地址只读一次;可以通过Math.random()或new Date().getTime()解决。

b)   解决缓存困扰:在文件名后加上一个时间戳参数;保存每次读取文件的路径都不一样,这样浏览器就不会去缓存中拿而去读新的;

3.   Ajax请求动态数据:

a)   请求JSON文件;

b)   Ajax 从服务器上所读取的所有东西都是以文本的形式存在的;

c)   eval的使用,将返回的string转换成arr,或json;

d)   配合DOM使用;

4.   eval(str):

a)   接受一个字符串作为参数(服务器读取的数据都是string类型),这个字符串里面可以放任何JS代码;

b)   eval可以计算字符串里的值;对于json要加();

 

5.   Ajax的原理:

a)   HTTP 请求:

        i.      GET方式:安全性低、容量小,有缓存,适于分享,适合获取数据;(如: 浏览帖子)

       ii.      POST方法:安全性稍好,容量2G,无缓存,适合上传数据;(如:用户注册)

6.   Ajax请求服务器数据的4个步骤:

a)   创建一个Ajax对象 (买个手机);

        i.      非IE6 : new XMLHttpRequest();

       ii.      IE6 : new ActiveXObject("Microsoft XMLHTTP");

b)   连接服务器(拨号);

c)   发送请求,告诉服务器要什么(说话);

d)   接收返回值(听);

7.   Ajax对象创建的兼容处理:

a)   用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)  

b)   原理:

        i.      用一个不存在的变量: 出错;

       ii.      用一个不存在的属性:undefined;

8.   Ajax连接服务器:

a)   oAjax.open(方法,url, 是否为异步);

b)   方法:大多用”Get”;

c)   同步与异步:

        i.      同步:任何两件事不能一块儿做;

       ii.      异步: 多件事儿可以一起进行;Ajax天生就该工作在异步模式下的;

9.   Ajax发送请求:

a)   oAjax.send();

10.Ajax接收服务器的返回信息:

a)   oAjax.onreadystatechange 事件:

        i.      它类似于window.onload;

       ii.      用来监控请求状态;

     iii.      是当客户端和服务器那边有通信发生或有状态变化的时候会来调用;

       iv.      客户端和服务器的通信不是一步就完成的;

        v.      oAjax.readyState属性:告诉我们客户端和服务器的通信发生到哪一步了; 4 代表完成;

       vi.      oAjax.readyState == 4 只代表完成,不代表成功;

     vii.      oAjax.status == 200 代表成功;

    viii.      oAjax.status  , 400多是客户端错误, 500多是服务器错误, 300多是重定向;

       ix.      oAjax.responseText , 就是取得服务器返回的内容;

11.完整的ajax.js:

function json2str(json){    //将json转str    json.t=Math.random();    var arr=[];    for(var name in json){        arr.push(name+'='+encodeURIComponent(json[name]));  //encodeURIComponent兼容汉字,可把字符串作为URI组件进行编码。    }    return arr.join('&');}function ajax(url,data,success,error){    //data是url?后面的东西    //success成功之后的回调函数    //1.创建一个ajax对象    if(window.XMLHttpRequest){
//可以用undefined作为判断条件,但不能用error作为判断条件;变量不定义,加window相当于undefinded; var oAjax = new XMLHttpRequest(); //用于非ie6 }else{ var oAjax = new ActiveXObject('Microsoft.XMLHttp');//用于ie6;Microsoft公司的插件 } //2.建立连接 是否异步 oAjax.open('GET',url+'?'+json2str(data),true); //3.发送 oAjax.send(); //4.接收 oAjax.onreadystatechange = function(){ //网络状态readyState if(oAjax.readyState == 4){ //接收完成 0,初始化1,建立连接2.发送3.接收4.完成 //http的状态status if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){ //接收成功 200-300接收成功 304未修改 404未找到 //从服务器返回的文本 success&&success(oAjax.responseText); //如果成功,服务器返回的文本内容 }else{ error&&error(oAjax.status);//如果错误,服务器返回的错误码 } } }; }

 12.ajax的特点:

a.缓存    Math.random,new Date().getTime();

b.返回的内容都是string类型
        eval json必须加括号
c.编码格式要统一
        utf-8
        gb2312
d.ajax请求数据 与文件后缀名无关

转载于:https://www.cnblogs.com/yang0902/p/5719964.html

你可能感兴趣的文章
SignalR---服务端
查看>>
PlayerPrefs存储Vector3等结构数据
查看>>
LightOJ - 1422 Halloween Costumes (区间DP)
查看>>
OPENWRT 支持git
查看>>
Union & Find 并查集的实现
查看>>
Memcached 查看帮助
查看>>
【2003-1】【数字之和】
查看>>
谈谈最近一些手游推广的新模式
查看>>
AngularJs-$parsers自我理解-解析
查看>>
BZOJ4785 ZJOI2017树状数组(概率+二维线段树)
查看>>
[Python]一些博客
查看>>
C++解析(4):引用的本质
查看>>
10月70个大中城市房价跌幅放缓 一线城市库存下滑
查看>>
【原创】全面剖析飞凌2440,6410开发板选型指南
查看>>
Codeforeces 954C Matrix Walk
查看>>
java 处理高精度计算
查看>>
xcode多target
查看>>
传入一维数组到函数 Passing 1D array to function
查看>>
CF 317 A. Lengthening Sticks(容斥+组合数学)
查看>>
53.一个挺有意思的api(drag)
查看>>