ajax(1)

0.传统请求：form，a，地址栏，js:location

特点：每次请求结果都是一整张新的页面。

情景：一次请求所需要的结果不再是一整张页面，而是只需要页面的一个局部

(信息:字符串)

弊端:不适宜处理如上情景,浪费网络资源.

===================================================================================

1.ajax 客户端技术：运行在客户端(浏览器)

由几种技术组合：javascript+dom+css+xhr

作用：发送异步请求

同步：在同一个执行线上

异步：在不同的执行线上

异步请求：浏览器在展示当前页面的同时，在后台偷偷的发起的请求，

如此的请求不会阻塞当前页面的展示。

特点：异步请求的结果是一个文本信息(页面局部)

=========================================================================

2.ajax 的组成：

javascript：编程语言

dom：刷新页面局部

css: 效果优化

xhr: ajax的核心对象，用来发送异步请求

=========================================================================

3.ajax开发流程：【异步请求,局部刷新】

3.1 创建xhr对象：

var xhr35;//XMLHttpRequst

if(window.ActiveXObject){//IE内核

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

}else if(window.XMLHttpRequest){//webkit IE7+ chrome safiri opera ff

xhr35=new XMLHttpRequest();

}

3.2 xhr的初始化：1.请求方式：get/post 2.url 3.param

xhr.open("get","${pageContext.request.contextPath}/ajax35?username=c35&password=123");

3.3 发送异步请求

xhr35.send();

3.4 接收响应结果，并展示在页面中

xhr35.onreadystatechange=function(){//为xhr注册监听，监听xhr的readyState值得改变

//当xhr的readyState值为4时，且请求成功时接收返回值

if(xhr35.readyState==4 && xhr35.status==200){

//接收响应值

var ret35=xhr35.responseText;

//将响应值展示在页面中：DOM+css

$("p").text(ret35);

}

}

*服务器接收异步请求：

//接收请求

//调用业务

//响应结果，将一段文本(处理结果)响应给客户端

PrintWriter out=res.getWriter();

out.print("hilo~~c35~~");

out.flush();

out.close();

*xhr自身的状态属性

1>readyState

0 创建,未初始化

1 初始化

2 发送

3 开始接收返回值

4 返回接收完毕

2>status http请求状态码

404

500.....

200 请求成功

=====================================================================================

4.ajax post请求

*post请求流程和get请求流程基本一致

*post请求流程：

1.创建xhr

2.初始化xhr：

xhr.open("post","url");【1】

3.发送:在post请求中,如果要携带请求参数，则需要设置xhr的请求头

//设置请求头：application/x-www-form-urlencoded-->携带的请求参数的规格是：

//key=value

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send("username=c35&password=123");【2】

4.设置监听

5.在特定时刻接收响应值，并处理

====================================================================================

5.ajax 乱码解决方案：

*get请求：

*client-->server

页面中：

jsp：pageEncoding="utf-8"

html:<meta http-equiv="content-type" content="text/html;charset=utf-8">

服务器中：

conf/server.xml 中 URIEncoding="utf-8"

*server-->client

res.setCharaterEncoding("utf-8");

PrintWriter out=res.getWriter();

*post请求时：

*client-->server

页面中：

jsp：pageEncoding="utf-8"

html:<meta http-equiv="content-type" content="text/html;charset=utf-8">

服务器中：

req.setCharaterEncoding("utf-8");

req.getParameter("xxx");

*server-->client

res.setCharaterEncoding("utf-8");

PrintWriter out=res.getWriter();

====================================================================================

6.ajax 请求 规避浏览器的缓存

xhr.open("get/post","url?username=xxx&password=xxx&a="+Math.random());

====================================================================================