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()); ====================================================================================

原文地址：https://www.jb51.cc/ajax/162919.html