文档章节

Ajax初识

cpp_monkey
 cpp_monkey
发布于 2014/06/15 01:24
字数 1665
阅读 53
收藏 7
点赞 0
评论 0

    扯蛋

    在这个星期,甚至说在这一段时间内,因为工作需要,一直都在学习前端开始知识,想想就比较苦恼,当我学C语言时,小伙伴们也在学,当我学C++时,小伙伴们在学Web开发知识,当我学Web开发知识时,小伙伴们已经在学移动开发知识,我这是总慢人一步的节奏么?不过我的根本和吃饭家伙还是习佳佳,其他都是附带的,好了,不扯远了,还是回归正题吧。

     在本篇博文中,主要讨论的还是ajax的初级知识。首先,谈谈ajax是门什么技术,它出现的原因和背景是什么,接着,扯扯ajax内部结构是什么,在什么地方可以使用,最后,说一下它的使用。

    背景

    ajax的意思是Asynchronous Javascript And XML,取这四个单词的首字母拼凑而成,中文意思是异步js及xml(实际上现在使用的都是json而不是xml),咋一看,每个单词都认识,但是拼在一起就它认识我,我不认识它了。其实很简单,ajax就是使用了这几门技术组合成的一门新技术,它的功能就是在浏览器下,可以不通过刷新页面的形式,获取服务端的数据,例如:某度的搜索框,你输入了一个单词,搜索框会出现一个下拉框,显示相关的搜索词,这就是使用了ajax的地方(如下图),如果不适用ajax,你要实现此功能,估计要加一个按钮,上面写着相关搜索词,点击一下,刷新页面,才能显示出来。

    使用ajax的好处已经看到了,第一,交互好,让用户少做点事,方便快捷,设计师也不用考虑多一个按钮放什么地方,苦了程序员而已;第二,减少网络的传输量,因为在某些情况下,你只需要页面部分数据更新,其它地方都不需要,但是如果不适用ajax就要传输整个页面,增加了页面的加载速度,而且在互联网初期,带宽是很低的,能节约一点是一点,况且这节约的是一大部分。

    缺点是,在网络不好的情况下,ajax与服务器交互时间过长,而页面却没有任何反应,这用户体验对用户是致命的,因此,一般都要加上一个可视化组件,显示正在获取数据,而不是出现bug,页面挂掉的情况。

ajax内部结构

    ajax说的这么神奇,它又是如何实现的呢? 有几大关键点用于实现。

    1.  XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject),由微软提供的,通过封装XMLHttpRequest的操作得到ajax接口。ajax能局部刷新都是依靠此对象!w3c的例子:ajax例子

xmlhttp.open("GET","demo.cgi",true);        //通过使用Get方法调用url,局部刷新页面
xmlhttp.send(null);                         //发送真正请求,open只是准备,并没有真正发送

     在IE不知道多少版本下- -||,浏览器是使用缓存数据,并不会请求服务器,因此需要在url后面添加一个随机参数,以确保每次都是请求服务器的数据。

xmlhttp.open("GET","demo.cgi?t=" + Math.random(),true);

    另一方面,可以在url后添加随机参数也就是说可以在url后添加参数,以此传递。

xmlhttp.open("GET","demo.asp?user=admin&passwd=admin",true);

    2.  Get和Post,不只是ajax内是Get和Post,整个Web开发,传输数据都是使用Get和Post,在ajax内,使用Get和Post是有一点点的区别,Get的调用形式参考上面,而Post的调用形式则如下

xmlhttp.open("POST","demo.cgi",true);            //传递的方法不同,没什么好说的
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   //Post是用于传递大量数据,使用在表单的提交,这就是与Get的不同,Get是以url参数的形式,则是text/html,而Post则以表单,而表单则是使用application/x-www-form-urlencoded的形式,因此ajax使用Post请求时,需要模拟表单提交的形式,添加请求头部Content-type。
xmlhttp.send("user=admin&passwd=admin");        //Get的是为null的,Send的参数是专门为post方法服务的。

    3. readyState,存放XMLHttpRequest的状态,标识着一个ajax的请求从开始到结束,让开发者可以在不同状态变换时,可以做某些操作。

    • 0: 请求未初始化

    • 1: 服务器连接已建立

    • 2: 请求已接收

    • 3: 请求处理中

    • 4: 请求已完成,且响应已就绪

    4. 同步与异步,这一关系可以简单的理解为单进程与多进程,ajax使用的最多的就是异步方式。

xmlhttp.open("GET","demo.cgi",true);  //第三个参数决定是同步(false)还是异步(true)

    onreadystatechange,当readyState变换时,会触发此函数。ajax以异步(true)方式调用,必须实现此函数,否则请求无效。而同步(false)则不能实现此函数。

xmlhttp.onreadystatechange=function()            //选自http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

    5. 回调函数(Call Back),将函数以参数的形式,传递给另一个函数,让其调用。例如,onreadystatechange调用时,需要返回服务器数据和自定义串组合,不能将onreadystatechange写死,这时将自定义函数传递给        onreadystatechange,让其调用组合。(好难说- -||)

function A(){
    functioin B(){
        return <p>test</p>;
    }
}

A();    //A得到的是空,因为B的返回数据不能返回到A的返回数据,这两者是不同的
//-----------------------------------------------------------------
function A(cb){
    functioin B(cb){
        return cb();
    }
}

A(function {
    return <p>test</p>;    //将函数以参数的形式传递,并运行。(好像问题还没解决。。)
});

运用

    ajax的使用很简单,就是传递一个json对象,jQuery调用ajax如下,其他的js库也差不多,可以依此类推。

$.ajax({                                                    //一个Ajax过程 
    type: "post",                                           //以post方式与后台沟通 
    url : "./demo.cgi",                                     //与此请求页面沟通 
    dataType:'json',                                        //从返回的值以 JSON方式 解释 
    data: 'username='+username+'&password='+password,       //发给服务器的数据有两项,分别是上面传来的u和p 
    success: function(json){                                //如果调用成功 
        alert(json.username+'\n'+json.password);            //打印出来
    }
});

  完整例子,一个自定义封装XMLHttpRequest对象的ajax接口。

© 著作权归作者所有

共有 人打赏支持
cpp_monkey
粉丝 0
博文 5
码字总数 4638
作品 0
深圳
初识 jQuery Deferred

jQuery 1.5之前,Ajax请求可能有点麻烦。写一个简单get请求,你可能会写成: $(function() {$.get( ); }); 但这种写法存在一个问题:如果你不定义一个函数来运行此代码,执行失败后会发生什么...

迷途d书童
2012/04/14
4K
12
初识Comet技术

初识Comet技术一、服务器推送技术概述服务器推送技术(Servers Push)的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的...

Airship
2016/10/31
19
1
Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String

Firefox给出的错误 Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String:...

anonymous_007
2014/05/28
1K
2
初识websocket

前言:工作中在验证前端页面展示数据时,接触到websocket这一概念,这里粗略记录下关于websocket的理解和常用方式。 (1)什么是websocket? 命名:看起来好像和socket有某种关系,但是根据查...

在你的世界路过
2017/12/08
0
0
jqurey学习碎片-0001-jquery初识入门

十多年一直在做传统公司的运营与管理,公司也逐步交给其他股东来做。基于兴趣,再次接触编程,宁静有趣的世界,从现在开始坚持编程学习的记录。1、关于十多年前的前端开发,记得09年初年初识...

wx599c47c7bdcad
2017/12/16
0
0
转Elasticsearch顶尖高手系列课程

Elasticsearch,是目前行业中非常热门的一个技术。Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站、门户网站、企业IT系统等各种场景下的搜索引擎,也可以用于对海量...

小花卷juan
2017/06/24
124
0
[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

Ajax的全称是 Asynchronous JavaScript And XML,即异步JavaScript和XML。2005年由Jesse James Garrett首先提出。在之后极短的时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的W...

LSantorini
2016/01/26
30
0
jQuery全面解剖系列(一)Deferred风格的Ajax

最近准備寫一個系列的文章來談jQuery的種種技巧和原理。 今天講Deferred風格的Ajax,本篇分爲兩部分,第一部分介紹Deferred風格的Ajax的基本使用,第二部分深入一點介紹原理。 基本使用 Defe...

i33
2012/11/23
0
0
前后台交互

今天小姐姐不分享代码,来谈谈我对前后台交互的认知。 在web开发中,前后台交互是一个至关重要的环节,前后台需要及时沟通,工作才能顺利进行,有时候就是因为沟通不够,然后造成许多白用功。...

马大哈tt
2017/11/18
0
0
深入浅出 Javascript API(一)--基本框架

Javascript API是ArcGIS Server 9.3新增的一套API框架,为创建WebGIS应用提供了轻量级的解决方法,在客户端利用ags所提供的服务,就能实现地图应用和地理功能。 还记得ArcIMS Blueviewer示例...

文艺小青年
2017/03/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
28分钟前
0
0
Android 复制和粘贴功能

做了一回搬运工,原文地址:https://blog.csdn.net/kennethyo/article/details/76602765 Android 复制和粘贴功能,需要调用系统服务ClipboardManager来实现。 ClipboardManager mClipboardM...

她叫我小渝
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
6
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
今天
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
今天
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部