javascript-ajax基础

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(特点:1.进行少量数据交换,2.异步更新,3.网页内容局部更新)。
初识ajax的时候,会有点点难度,其实最好是对前后台有一个系统全面的了解在理解ajax就会容易很多,这里我们利用百度如下图来解释一下上面的三个特点


image.png

其实我们知道,当我们提交表单数据到后台的的时候,后台接到数据进行操作之后,返回一个新页面来应答,这里是整个页面刷新的,而上图当我们在百度页面输入ajax的字段的时候,百度的输入框会根据我们输入的内容来返回搜索的词条"ajax提交form表单,ajax教程...等",但是整个页面都停留在最初进入的页面没有动过,而这个效果就是ajax完成的也就是局部刷新的(局部就是我红色框的部分),因为局部刷新,所以交换的数据也是相对少量,接下来我们讲异步。

异步:比如我这里有两个函数,第一个函数是进行1到100000000的相加,第二个函数只是单纯输出一句话,而此时我程序中的执行顺序是,先调用第一个函数,在调用第二个函数,这时候我们会发现当我打开页面要有一会的时间页面才会输出第二个函数输出的话,假如我们页面需要大量计算的话,那我们的页面岂不是要很久才会刷新出来,这时你可能说我们把计算的那一部分放在最后去执行呀,那问题又来了,假如我第二个函数需要用到第一个函数计算的结果呢,那么第一个函数就必须放在最前面,那没有办法了么?这里就要用到异步这个词,异步的意思是,当我执行第一个函数的时候,我的后续程序也可以继续执行,当我第一个函数的结果计算出来了,再去通知第二个函数来执行,(这里加法举例会有一个小困惑就是js引擎是单线程,而我所说的异步是让这个加法运算交给后台服务去执行比如java,当运算成功之后再将结果返回前台js,通知运算结果出来了,你可以执行第二个函数了)有一个很好的比喻,“你来找我,我有事情,你可以先去做其他事情,等我忙完了,我通知你”,我们结合ajax请求的代码讲一下

function createXHR(){
    /*除ie之外的浏览器创建xmlhttprequest的方法 */
    if(window.XMLHttpRequest){ 
       var OAjax = new XMLHttpRequest(); 
     }else{
        /*ie*/ 
       var OAjax = new ActiveXObject(); 
     } 

     /*ajax.txt?t="+new Date.getTime()及时更新,以免浏览器缓存之前返回的内容 */ 
     OAjax.open("post","ajax.txt?t="+new Date().getTime,"true"); 
     /*这里就是异步开始的地方,当我们把请求数据发送到后台的时候,我们的浏览器就可以向下执行其他的任务了,
       而根据状态变化我们可以顺利拿到后台返回的数据,然后通知前台需要该数据的那个函数可以执行了(回调函数),
      我没有写那个函数,我直接用的alert(p)*/
     OAjax.send();

     OAjax.onreadystatechange = function(){

       /* readyState(0:为初始化,还没有调用open方法 1:以调用send方法,正在发送请求 2:send方法完成,浏览器已收到全部响应的内容 
         3:浏览器正在解析响应的原始内容解析成浏览器可读的格式 4:响应内容解析完成,可以被浏览器调用) 无论服务器是否正确返回都会经历这四个状态,所以我们还需要判断是否正确返回状态码200 */
        if(OAjax.readyState == 4){
            if(OAjax.status == 200){ /*浏览器成功读取服务器的文件 */ 
            /* alert(typeof OAjax.responseText) */
            var p = JSON.parse(OAjax.responseText);
            /*responseText为服务器返会的数据 为字符串类型,为了我们操作数据方便,我们将它转换成json对象*/
             alert(p)
            }else{}
        }
    }     
}

js学习(ECMAScript,DOM,BOM):https://www.jianshu.com/p/b7136540b379

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容