【Ajax教程详解】

Ajax

1.1 ajax简介

Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。

Ajax是一种无需重新加载整个页面的情况下,能够更新部分网页的技术。

Ajax = 异步  JavaScript和XML。

同步:同步方法调用一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为。

异步:异步方法调用更像一个消息传递,一旦开始,方法调用就会立即返回,调用者就可以继续后续的操作。

Ajax通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下,对网页的某部分进行更新。

传统的网页(不适用Ajax)如果需要更新内容,必须重载整个网页。

有很多使用Ajax的应用案例程序案例:新浪微博、Google地图、开心网等;

1.2 XMLHttpRequest

XMLHttpRequest对象

XMLHttpRequest是Ajax的基础,所有现在浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。

所有现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下,对页面的某部分进行更新。

XMLHttpRequest使用流程

1、创建XMLHttpRequest对象

2、请求(同步或者异步请求)

3、响应

Request的Open方法

Request的Open方法

注意:默认方法是异步的,也就是开子线程,同步方法已经被废弃,不能再用

1.3 Ajax准备状态码

request.readyState

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

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

1.4 Http响应状态

request.status

200:‘OK’

404:未找到页面

405:用来访问本页面的HTTP方法不被允许,也就是post不能请求get

1.5 获取响应数据

request.responeText

1.6 登录的get案例


ajax状态码和响应码

Step1:写一个get登录表单

登录表单


Step2:写一个LoginServlet

LoginServlet


Step3:ajax的get请求

ajax的get请求

1.7 登录的post案例

ajax的post请求流程

1.创建请求对象

2.连接

3.设置content-type请求头(如果不设置请求头,发送请求会失败)

4.发送请求,传递请求参数

5.接收响应

post请求登录的js代码

2 JSON字符串

1.JSON指的是JavaScript对象表示法(JavaScript Object Notation)

2. JSON 是轻量级的文本数据交换格式

3. JSON独立于语言

4. JSON具有自我描述性,更易理解。

2.1 Json字典

相当于java的map(键值对){“firstName”:“Bill”,“lastName”:“Gates”}

2.2 Json数组

相当于数组里存了map,字典

[

{ "firstName":"Bill" , "lastName":"Gates" },

{ "firstName":"George" , "lastName":"Bush" },

{ "firstName":"Thomas" , "lastName":"Carter" }

]

2.3 Json字典

字典里面存数组

{

"employees": [

{ "firstName":"Bill" , "lastName":"Gates" },

{ "firstName":"George" , "lastName":"Bush" },

{ "firstName":"Thomas" , "lastName":"Carter" }

]

}

2.4 js中的json对象和字符串相互转换

json对象和字符串相互转换


3.1 Jackson简介

Jackson是一个简单基于Java应用库,Jackson可以轻松的将Java对象转换成json字符串和xml文档,同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少,简单易用并且性能也要相对高些,并且Jackson社区相对比较活跃,更新速度也比较快。

3.2 jackson特点

1、容易使用- jackson API提供了一个高层次外观,以简化常用的用例。

2、无需创建映射- API提供了默认的映射大部分对象序列化。

3、性能高-快速,低内存占用,适合大型对象图表或系统。

4、干净的JSON - jackson创建一个干净和紧凑的JSON结果,这是让人很容易阅读。

5、不依赖-库不需要任何其他的库,除了JDK。

6、开源代码- jackson是开源的,可以免费使用。

3.3对象转json字符串案例

对象转json字符串


3.4 json字符串转对象

String str = "{\"id\":\"1001\",\"name\":\"Java入门\",\"price\":19.88,\"pnum\":100,\"category\":\"IT\",\"description\":\"Good Book\"}";

System.out.println(str);//创建 "对象映射" 对象

ObjectMapper mapper = new ObjectMapper();

Book book = mapper.readValue(str, Book.class);

System.out.println(book);



4 ajax处理json数据


返回json数据

5 get请求中文处理

1.请求的url后面的参数不能传中文

2.工作中对get请求对中文进行url编码

3.url编码是什么

URL编码遵循下列规则: 每对name/value由&;符分开;每对来自表单的name/value由=符分开。如果用 解码软件 解码软件 户没有输入值给这个name,那么这个name还是出现,只是无值。任何特殊的字符(就是那些不是简单的七位ASCII,如汉字)将以百分符%用十六进制编码,当然也包括象 =,&;,和 % 这些特殊的字符。其实url编码就是一个字符ascii码的十六进制。


js提供的url编码和解码

encodeURIComponent编码与decodeURIComponent 解码

encodeURI与decodeURIL

encodeURI()与encodeURIComponent()区别

两者的区别在于,encodeURI函数不会对以下的字符进行处理: “! @ # $ & * ( ) = : / ; ? + ' ”

推荐使用encodeURIComponent()

f]默认情况下ajax,浏览器会对url进行编码

案例:

<script type="text/javascript">

var urlStr = 'LoginServlet?username=张三丰&password=123';

//1.对字符串进行url编码,会对一些特殊字符串,比如中文,:,&,?号进行编码

var u1 = encodeURIComponent(urlStr);

var u2 = encodeURI(urlStr)

console.log(u1);

console.log(u2);

//2.对url进行解码,还原原始模样

console.log(decodeURIComponent(u1));

console.log(decodeURIComponent(u2));

</script>



对前面get请求进行url编码



6 ajax的兼容性问题

var request;

if (window.XMLHttpRequest)

{

//  IE7+, Firefox, Chrome, Opera, Safari浏览器执行代码

request=new XMLHttpRequest();

}

else

{

// IE6, IE5浏览器执行代码

request=new ActiveXObject("Microsoft.XMLHTTP");

}


7. 总结

工作中使用ajax是用于发送get/post的网络异步请求,工作中用的更多的是jquery封装好的get/post请求。

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

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 8,953评论 0 13
  • 创新型区块链项目ICC (intelligent Commerce Chain),提出了基于区块链的AI智能商业生...
    ICC智能商业链阅读 235评论 0 0
  • 女子最是十六七, 爱上诗书与梦里人。 诗中说:我打江南走过, 那等在季节里的容颜如莲花的开落。 书中说:人间最美是...
    修行的四月阅读 611评论 0 5