JavaScript本来就很简单(神说ajax)

js中的ajax

ajax:异步的JavaScript和XML,首先它是一门用于前后台数据交互的技术,这里有两个比较有趣的概念(同步与异步)说白了就是后台传回来的数据,同步的话,你必须刷新页面才能更新数据,而异步更新的话,可以在不刷新页面的情况下,实现页面数据的更新


ajax的好处:举个简单的例子,表单验证,在ajax技术出现之前,咱们都是把表单填写完成,然后提交给后台进行验证,后台如果发现有一个表单填写的不符合规范,就会将数据返回给前台,前台刷新页面重新填写,所以的表单都得重新填写,这样就很气知道吗?很气!!! 后来就有了ajax,你可以填完一个然后ajax就会跑到后台去验证,验证完了,然后再跑回来告诉你,填写的行不行,要求重新填写,而且还不用刷新页面,,哈哈,是不是很厉害呢


ajax说白了就是前台和后台之间数据传递的一门技术,再往白了说,就是跑腿的,假如前台页面需要一个数据了,好,ajax你去后台跑一趟,把数据给我取回来,然后ajax就去了,后台给了它一串数据,最后跑回来了,把数据给了我们前台。这个过程其实特别简单,ajax的一个关键就是,他取数据的这个过程,咱们前台该干嘛还是干嘛,并不影响,也就是说相当于开辟了两个空间,一个空间继续做你该做的事,另一个空间去取数据,ajax去取数据,其他人毫不影响,而且取回来直接就可以用,不用刷新页面,或者说的更准确一点,实现局部刷新


ajax具体实现方式

  • 核心就是对象,首先创建一个XMLHttpRequest对象,然后连接后台,发送请求,最后接受后台返回来的数据即可
var xhr ;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();//现代浏览器实例化ajax对象方式
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE浏览器实例化ajax对象方式

        }
//这里进行的是针对IE浏览器的兼容性处理,在IE中,我们的XMLHttpRequest对象就变成了ActiveXObject,而且里边的参数是不能少的
  • 上面提到了用ajax就简单的几步而已,
  • 第一步实例化ajax对象,
  • 第二步连接后台,:怎么连接呢,ajax对象给我们提供了一个方法:open("指定提交的方式get或者post","后台的url地址","是否使用异步,默认true使用异步")
  • 第三步发送请求:send(发送的数据)有时候我们需要给后台发送一些数据,比如你只想要第一条数据,这个时候你就send的时候告诉后台我只要第一条,别的不要
  • 第四步接受后台给我们返回来的数据

get与 post的区别:都是给后台提交数据的方式,区别就是get提交的时候把数据放到请求地址的后面,这样就会很不安全,大家都可以看到、而post提交的数据会进行加密,所以比较安全,get传递的数据量比较少,post传递的数据量比较大


我们发送了ajax请求,但是我们并不知道是否发送成功了并且服务器是否处理了我们的请求,以及是否返回给我们前台,这儿就需要用到一个东西,可以让我们很好的检测ajax请求的过程

  • ajax对象身上有一个readystate属性,表示ajax整个请求的状态:
    • 0:请求并没有发出(没有建立与后台的联系,open之前)
    • 1 :请求已经建立还没有发出
    • 2 :请求已经发送
    • 3 :请求正在处理
    • 4 :请求已经被处理完毕
    • 每当readystate状态改变的时候,就会调用onreadystatechange()函数,所以我们可以在这个函数中做相应的判断,当readystate为4时,表示请求成功的被后台执行、在这儿还要提一个属性就是:status属性,表示状态码,有很多很多,在这儿就说一个,200这个状态码就表示后台成功返回了数据。
xhr.onreadystatechange = function(){
     if(xhr.readystate == 4){//请求已经成功被处理
         if(xhr.status == 200){//成功的从服务器得到了响应
             //这里进行处理返回的数据
        }
    }
}

ajax在jQuery中的应用

$.ajax({
                    type:"post",  //请求方式
                    url:"a.php", //服务器的链接地址
                    dataType:"json", //传送和接受数据的格式
                    data:{
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){//接受数据成功时调用的函数
                       console.log(data);//data为服务器返回的数据
                    },
                    error:function(request){//请求数据失败时调用的函数
                        alert("发生错误:"+request.status);
                    }
});

本文有不完善的地方,希望大家评论指正,本文首发于csdn博客喜欢的可以去点个赞,谢谢大家

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

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,173评论 0 7
  • 转载地址:http://www.cnblogs.com/mingmingruyuedlut/archive/201...
    matianhe阅读 1,669评论 0 129
  • 大家好,我是IT修真院深圳分院第3期的学员,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师...
    大大头大阅读 7,560评论 1 72
  • 限定从属分句就是我们传统意义上的从句。从句依附于主句�,不能独立成句但是具有主语与谓语部分。 从句内容的分类 1....
    高鸟知更阅读 1,220评论 0 1
  • 00金风玉露初相逢,鬼斧神功天铸就 在江湖中,你若见过神医顾十九,你定会听他提起一段悠悠往事。据他回忆,那日的黄鹤...
    守素阅读 1,294评论 76 31