百战卓越班学员学习经验分享:Ajax异步技术与json

来自尚学堂百战卓越班学员知乎左新宇的学习分享。

Ajax简介

ajax 的全称是Asynchronous JavaScript and XML(异步的JavaScript 和 XML),其中,Asynchronous 是 异步 的意思,它有别于传统web开发中采用的同步的方式。

关于同步和异步

异步传输是面向字符的传输,它的单位是字符;

而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话,必须这个操作完了才会执行下一步,在等待期间浏览器会挂起不能执行任何接下来的js代码;异步则是【告诉】浏览器去做,【告诉】是一瞬间的事情,然后就继续执行下一步了,等到结果返回来了,浏览器会通知js执行相应的回调。

Ajax的基本原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

北京尚学堂|百战卓越班学员学习经验分享:Ajax异步技术与json

这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

首先,需要先了解XMLHttpRequest这个对象的属性和方法:

AJAX运行步骤

在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,分别是。

0 - (未初始化)还没有调用send()方法

1 - (载入)已调用send()方法,正在发送请求

2 - (载入完成)send()方法执行完成,

3 - (交互)正在解析响应内容

4 - (完成)响应内容解析完成,可以在客户端调用了

对于上面的状态,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。

北京尚学堂|百战卓越班学员学习经验分享:Ajax异步技术与json

北京尚学堂|百战卓越班学员学习经验分享:Ajax异步技术与json

使用ajax的基本步骤:

1、创建ajax引擎对象

//判断ajax状态码

//判断响应状态码

//获取响应信息(普通字符串和json格式的字符串)

//处理响应

3、创建并发送ajax请求

创建请求(设置请求方式,设置请求地址,设置异步或者同步)

发送请求

4、其他处理

创建并发送ajax请求

1、创建ajax请求(设置异步或者同步)

ajax.open(method,url,ansyc);

method:表示请求方式

get方式:请求数据以?隔开的形式拼接在url的后面。请求数据不能写在send方法中

post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据&键值对数据..."),如果没有请求数据则ajax.send(null)

url:请求地址

ansyc:设置异步或者同步请求,true表示异步,false,表示同步。默认是异步的。

异步:当前js函数继续执行,无须等待ajax请求的响应以及响应的处理。

同步:当前js函数会等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的剩余代码。

2、发送ajax请求

get请求方式

		 //创建请求
ajax.open("get","my?uname=张三&pwd=123",false);
//发送请求
ajax.send(null); */

post方式

 	 //创建请求
ajax.open("post","my",false);
//设置请求参数为键值对方式
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencode;
//发送请求
ajax.send("uname=张三&pwd=123");

json的概念

json就是js创建对象的一种格式。保证对象中数据的紧密性 和完整性。

json的格式:

var 对象名={

键名:值,

键名:值,

...

键名:值}

使用:在服务器端将要响应的数据拼接成json格式的字符串,这样客户端(浏览器端)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据的操作。我们可以在服务器端使用类似Gson(Gjson.jar)的工具包完成json格式字符串的拼接。

//jsp接收:
var data=ajax.responseText;
eval("var obj="+data);
//servlet发送
创建对象 User u=new User(18, "王五",18, "看电影");
json格式的字符串 String str=new Gson().toJson(u);

测试代码:

 

ajax学习










分享到:


相關文章: