ajax
来源：互联网 发布：股票k线数据如何获得? 编辑：程序博客网 时间：2024/04/30 07:52
1.ajax(asynchronous javascript and xml) (1)ajax是什么? ajax是一种用来改善用户体验的技术,其实质是 利用浏览器提供的一个特殊对象(XMLHttpRequest 对象)异步地向服务器发送请求,服务器一般只需要 返回部分数据(文本或者xml文档)，浏览器利用这些 数据更新当前页面。整个过程，页面刷新，不打断 用户的操作。 注： 异步：ajax对象向服务器发送请求时， 浏览器不会销毁当前页面，用户仍然可 以对当前页面做其它操作。 (2)ajax对象如何获得 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject( 'Microsoft.XMLHttp'); } return xhr; } (3)ajax对象的几个重要的属性 1)onreadystatechange:用来绑订一个事件处理 函数(该函数用来处理readystatechange事件)。 注：当ajax对象的readyState属性发生了改变， 比如，从0变成了1,就会产生readystatechange 事件。 2)readyState：有5个值，分别是0,1,2,3,4，表示 ajax对象与服务器之间通信的状态。比如值为4时， 表示ajax对象已经获得了服务器返回的所有的数据。 3)responseText:获得服务器返回的文本。 4)responseXML:获得服务器返回的xml文档。 5)status:获得服务器返回的状态码。 (4)编程步骤 step1,获得ajax对象。 比如 var xhr = getXhr(); step2,使用ajax对象发送请求。 1)get请求 xhr.open('get', 'check_uname.do?uname=Tom',true); xhr.onreadystatechange=f1; xhr.send(null); 注： true:发送异步请求(浏览器不会销毁 当前页面，用户仍然可以对当前页面做其它 操作)。 false:发送同步请求(浏览器不会销毁 当前页面,浏览器会锁定当前页面，用户 不能够对当前页面做其它操作)。 step3,编写服务器端的程序，一般不需要返回 完整的页面，只需要返回部分数据。 step4,编写事件处理函数f1 function f1(){ //必须等到ajax对象获得了服务器返回的 //所有数据。 if(xhr.readyState == 4){ var txt = xhr.responseText; //使用txt更新当前页面。 } }1.编码问题 (1)发送get请求 1)乱码问题产生的原因： ie浏览器提供的ajax对象在发送get请求时，会 对中文使用gbk编码，而其它浏览器使用utf-8编码。 服务器端，默认情况下，会使用iso-8859-1去解码。 2)如何解决 step1,让服务器使用utf-8来解码。 修改tomcat的配置文件(conf/server.xml) <Connector URIEncoding="utf-8"> 注：只针对get请求有效。 step2,使用encodeURI函数对请求地址进行处理。 注：encodeURI是js内置的函数，直接使用即可。 该函数会对中文参数使用utf-8来编码。 (2)发送post请求 1)乱码问题产生的原因 浏览器提供的ajax对象对中文参数都会使用 utf-8来编码。 服务器端默认使用iso-8859-1来解码。 2)解决方式 request.setCharacterEncoding("utf-8");2,发送post请求 xhr.open('post','check_uname.do',true); xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange=f1; xhr.send('uname=' + $F('username')); 注： 按照http协议要求，发送post请求时，必须提供 "content-type"消息头。而ajax对象默认情况下生成 的请求数据包里面，没有提供该消息头，需要调用 setRequestHeader方法来添加。3.json (javascript object natation js对象声明) (1)什么是json? 是一种轻量级的数据交换技术标准。 1)数据交换: 将数据转换成一种与平台无关的数据格式( 比如xml或者json)然后发送给接收方来处理。 2)轻量级: 跟xml相比，json文档更小，解析速度更快。 xml格式 <stock> <code>600015</code> <name>山东高速</name> <price>20</price> </stock> json格式 {"code":"600015", "name":"山东高速","price":20} (2)json语法 www.json.org 1)表示一个对象1,缓存问题 (1)什么是缓存问题 ie浏览器提供的ajax对象在发送get请求时， 会查看请求地址是否访问过，如果访问过，则 不再发送新的请求，而是显示之前的结果。 (2)如何解决 在请求地址后面添加上随机数。 比如: getNumber.do?Math.random();2,发送同步请求 (1)什么是同步请求? 当ajax对象向服务器发送请求时，浏览器不会 销毁当前页面，浏览器会锁定当前页面，用户对 当前页面不能做其它操作。 (2)如何发送同步请求 open(请求方式,请求地址,false);1)
regist.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html> <head> <style type="text/css"> .tips{ color:red; } </style> <!-- 导入外部js文件： --> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> //JS尽量避免全局变量 function check_uname(){ //1获得ajax对象 var xhr = getXhr(); //2使用ajax对象发请求。（true:异步发请求） xhr.open('get','check_uname.do?uname='+$F('username'),'true'); //匿名内部函数： xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ //4处理服务器返回的数据 var txt = xhr.responseText; //innerHTML:读取或者修改节点的HTML内容 $('uname_msg').innerHTML = txt; } }; xhr.send(null); } </script> </head> <body> <form action=""> <fieldset> <legend>注册</legend> 用户名：<input id="username" name="uername" onblur="check_uname();"/> <!-- 用户名是否被占用提示内容： --> <span class="tips" id="uname_msg"></span> <br/> 密码：<input type="password" name="pwd"/><br/> <input type="submit" value="提交"/> </fieldset> </form> </body></html>test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>test1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; } </script> </head> <body> <a href="javascript:;" onclick="alert(getXhr())">点这里</a><br> </body></html>ActionServlet.java
package web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring( uri.lastIndexOf("/")+1, uri.lastIndexOf(".")); if("check_uname".equals(action)){ String uname = request.getParameter("uname"); if("Tom".equals(uname)){ out.println("用户名被占用"); }else{ out.println("可以使用"); } } out.close(); }}(2)
regist.jsp
<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%><html> <head> <style type="text/css"> .tips{ color:red; } </style> <!-- 导入外部js文件： --> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> //JS尽量避免全局变量 //get请求： function check_uname(){ //1获得ajax对象 var xhr = getXhr(); //2使用ajax对象发请求。（true:异步发请求） var uri = 'check_uname.do?uname='+$F('username'); /* 使用encodeURI函数对请求地址进行处理 （encodeURI函数是JS内置的函数，直接使用即可，该函数会对中文使用utf-8来编码） */ xhr.open('get',encodeURI(uri),'true'); //匿名内部函数： xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ //服务器返回200，则处理。否则，或者服务器端处理，或'检查用户名出错'; if(xhr.status == 200){ //4处理服务器返回的数据 var txt = xhr.responseText; //innerHTML:读取或者修改节点的HTML内容 $('uname_msg').innerHTML = txt; }else{ $('uname_msg').innerHTML = '检查用户名出错'; } } }; xhr.send(null); } //使用post请求 function check_uname2(){ //1，获得ajax对象 var xhr = getXhr(); //2,发 xhr.open('post','check_uname.do',true); //http协议的要求，ajax没有，所以这里添加消息头： xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; $('uname_msg').innerHTML = txt; } }; xhr.send('uname='+ $F('username'));//请求参数放进来 } </script> </head> <body> <form action="regist.do" method="post"> <fieldset> <legend>注册</legend> 用户名：<input id="username" name="uername" onblur="check_uname2();"/> <!-- 用户名是否被占用提示内容： --> <span class="tips" id="uname_msg"></span> <br/> 密码：<input type="password" name="pwd"/><br/> <input type="submit" value="提交"/> </fieldset> </form> </body></html>ActionServlet.java
package web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");//只对post请求有效 response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring( uri.lastIndexOf("/")+1, uri.lastIndexOf(".")); if("check_uname".equals(action)){ //模拟一个系统异常 (访问数据库出问题) //if(1 == 1){ // throw new ServletException(); //} String uname = request.getParameter("uname"); System.out.println(uname); if("李白".equals(uname)){ out.println("用户名被占用"); }else{ out.println("可以使用"); } } out.close(); }}2_2
city.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><html> <head> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> function showCities(){ var xhr = getXhr(); xhr.open('get','getCities.do?province='+$F('s1'),true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获得服务器返回的json字符串 //"朝阳,cy;海淀,hd" var txt = xhr.responseText; var arr = txt.split(';'); //添加之前清空s2 $('s2').innerHTML=''; for(i=0;i<arr.length;i++){ //cities:朝阳,cy var cities = arr[i]; var city = cities.split(','); //新建立一个option: city[0],city[1] ：value 和描述 var op = new Option(city[0],city[1]); $('s2').options[i] = op; } } }; xhr.send(null); } </script> </head> <body style="font-size:30px;" onload="showCities()"> <select id="s1" style="width:120px" onchange="showCities()"> <option value="bj">北京</option> <option value="sd">山东</option> <option value="hn">湖南</option> </select> <select style="width:120px" id="s2"> <option value=""></option> <option value=""></option> <option value=""></option> </select> </body></html>json.html
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript"> function f1(){ var obj = new Object(); obj.name = 'John'; obj.age = 22; view(obj); } function f2(){ var obj = {name:"Tom",age:33}; //但是json属性名必须双引号括起来，JS加不加都可（创建属性对象） view(obj); } function view(o){ alert(o.name); } function f3(){ var obj = { "name":"Sally", "address":{ "city":"bj", "street":"ca", "room":123 } }; alert(obj.address.city); } function f4(){ var arr=[{name:"Tom",age:33}, {name:"Jetty",age:23,}]; alert(arr[1].name); } //把json字符串转为js对象，或js对象组成的数组 function f5(){ var str = '{"name":"Tom","age":33}'; //利用框架prototype转换： var obj = str.evalJSON(); alert(obj.name); } function f6(){ //字符串用加号连起来 var str = '[{name:"Tom",age:33},'+ '{name:"Jetty",age:23}]'; //利用框架prototype转换： var arr = str.evalJSON(); alert(arr[1].name); } </script> </head> <body> <a href="javascript:;" onclick="f6()">ClickHere</a> </body></html>regist.jsp
<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%><html> <head> <style type="text/css"> .tips{ color:red; } </style> <!-- 导入外部js文件： --> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript"> //JS尽量避免全局变量 //get请求： function check_uname(){ //1获得ajax对象 var xhr = getXhr(); //2使用ajax对象发请求。（true:异步发请求） var uri = 'check_uname.do?uname='+$F('username'); /* 使用encodeURI函数对请求地址进行处理 （encodeURI函数是JS内置的函数，直接使用即可，该函数会对中文使用utf-8来编码） */ xhr.open('get',encodeURI(uri),'true'); //匿名内部函数： xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ //服务器返回200，则处理。否则，或者服务器端处理，或'检查用户名出错'; if(xhr.status == 200){ //4处理服务器返回的数据 var txt = xhr.responseText; //innerHTML:读取或者修改节点的HTML内容 $('uname_msg').innerHTML = txt; }else{ $('uname_msg').innerHTML = '检查用户名出错'; } } }; xhr.send(null); } //使用post请求 function check_uname2(){ //1，获得ajax对象 var xhr = getXhr(); //2,发 xhr.open('post','check_uname.do',true); //http协议的要求，ajax没有，所以这里添加消息头： xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; $('uname_msg').innerHTML = txt; } }; xhr.send('uname='+ $F('username'));//请求参数放进来 } </script> </head> <body> <form action="regist.do" method="post"> <fieldset> <legend>注册</legend> 用户名：<input id="username" name="uername" onblur="check_uname2();"/> <!-- 用户名是否被占用提示内容： --> <span class="tips" id="uname_msg"></span> <br/> 密码：<input type="password" name="pwd"/><br/> <input type="submit" value="提交"/> </fieldset> </form> </body></html>stock.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><html> <head> <style type="text/css"> #d1{ width:500px; height:320px; background-color:black; margin-left:300px; margin-top:30px; } #d2{ color:white; background-color:red; height:35px; } table{ color:yellow; font-style:italic; font-size:24px; } </style> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> function showStock(){ setInterval(quoto,5000) } /** 异步向服务器发送请求，服务器返回json字符串（几只股票信息） 将json字符串转为js对象组成的数组，然后遍历数组，更新表格 */ function quoto(){ var xhr = getXhr(); xhr.open('get','getStock.do',true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获得服务器返回的json字符串 var txt = xhr.responseText; //json字符串转为js对象组成的数组 var arr = txt.evalJSON(); var htmlContent = ""; for(i=0;i<arr.length;i++){ var s = arr[i]; htmlContent += "<tr><td>" + s.code + "</td><td>" + s.name + "</td><td>" + s.price + "</td></tr>"; } $('tb1').innerHTML = htmlContent; /*ie浏览器只有td可以用innerHTML属性 tbody,thead，tr都不可 可以用insertRow，insertCell解决 或者使用框架jQuery解决兼容问题*/ } }; xhr.send(null); } </script> </head> <body style="font-size:30px;" onload="showStock()"> <div id="d1"> <div id="d2">股票实时行情</div> <div id="d3"> <table width="100%" > <thead> <tr> <td>代码</td> <td>名称</td> <td>报价</td> </tr> </thead> <tbody id="tb1"> </tbody> </table> </div> </div> </body></html>Stock.java
package bean;public class Stock { private String code; private String name; private double price; public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; }}Test.java
package json;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import bean.Stock;public class Test { /** * 将Java对象转为json字符串 */ public static void test1(){ Stock s = new Stock(); s.setCode("600015"); s.setName("山东高速"); s.setPrice(20); //使用json官方提供的工具转换 JSONObject obj = JSONObject.fromObject(s); String jsonStr = obj.toString(); System.out.println(jsonStr); } /** * 将java对象组成的数组或集合转为json字符串 */ public static void test2(){ List<Stock> stocks = new ArrayList<Stock>(); for(int i=0;i<3;i++){ Stock s = new Stock(); s.setCode("60001" + ( i + 1)); s.setName("山东高速" + (i + 1)); s.setPrice(20 + i); stocks.add(s); } //fromObject()方法里也可以传进来数组 JSONArray array = JSONArray.fromObject(stocks); String jsonStr = array.toString(); System.out.println(jsonStr); } public static void main(String[] args) { test1(); test2(); }}ActionServlet.java
package web;import java.io.IOException;import java.io.PrintWriter;import java.math.BigDecimal;import java.util.ArrayList;import java.util.List;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import bean.Stock;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8");//只对post请求有效 response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring( uri.lastIndexOf("/")+1, uri.lastIndexOf(".")); if("check_uname".equals(action)){ //模拟一个系统异常 (访问数据库出问题) //if(1 == 1){ // throw new ServletException(); //} String uname = request.getParameter("uname"); System.out.println(uname); if("李白".equals(uname)){ out.println("用户名被占用"); }else{ out.println("可以使用"); } }else if("getStock".equals(action)){ List<Stock> stocks = new ArrayList<Stock>(); Random r = new Random(); for(int i=0;i<8;i++){ Stock s = new Stock(); s.setCode("60001" + r.nextInt(10)); s.setName("山东高速" + r.nextInt(10)); s.setPrice(getPrice(r)); stocks.add(s); } //fromObject()方法里也可以传进来数组 JSONArray array = JSONArray.fromObject(stocks); String jsonStr = array.toString(); out.println(jsonStr); }else if("getCities".equals(action)){ String provnice = request.getParameter("province"); System.out.println(provnice); if("bj".equals(provnice)){ out.println("朝阳,cy;海淀,hd"); }else if("sd".equals(provnice)){ out.println("济南,jn;青岛,qd;烟台,yt"); }else{ out.println("长沙,cs;衡阳,hy"); } } out.close(); } private double getPrice(Random r){ double price = 0; BigDecimal b = new BigDecimal(r.nextDouble()*100); //四舍五入 price = b.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue(); return price; }}(3)
regist.jsp
<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%><html> <head> <style type="text/css"> .tips{ color:red; font-style:italic; } </style> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> function check_uname(){ /*检查用户名是否为空 如果为空则不能提交 */ $('username_msg').innerHTML = ''; if($F('username').strip().length == 0){//strip()兼容各浏览器 $('username_msg').innerHTML = '用户名不能为空'; return false; } /* 检查用户名是否被占用， 如果被占用，不能提交 */ //异步请求： var flag = false; var xhr = getXhr(); //encodeURI暂时不用 //false:发送同步请求（如果写成异步无法提交） xhr.open('get','check_uname.do?uname='+$F('username').strip(),true); //绑定函数，函数还没执行 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; //alert(txt.length);out.println有回车 if(txt == 'no'){ $('username_msg').innerHTML='用户名被占用'; flag = false; }else{ $('username_msg').innerHTML='可以使用'; flag = true; } } }; xhr.send(null);//发请求 /* 发送同步请求，此时浏览器不会向下执行任何代码， 需要等待服务器的响应发送回来才会继续向下执行（会调用上面的内部函数） */ return flag; } function beforeSubmit(){ var rs = check_uname();//&& check_password(); return rs; } </script> </head> <body> <form action="regist.do" method="post" onsubmit="return beforeSubmit();"> <fieldset> <legend>注册</legend> 用户名：<input id="username" name="username" onblur="check_uname();"/> <!-- 用户名是否被占用提示内容： --> <span class="tips" id="username_msg"></span> <br/> 密码：<input type="password" name="pwd"/><br/> <input type="submit" value="提交"/> </fieldset> </form> </body></html>getNumber.jsp
<%@ page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%><html> <head> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript" src="js/my.js"></script> <script type="text/javascript"> function showNumber(){ var xhr = getXhr(); //加 ?' + Math.random欺骗IE浏览器，让它以为每次地址都不一样 //或者直接发post请求 xhr.open('get','getNumber.do?' + Math.random(),true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; $('d1').innerHTML = txt; } }; xhr.send(null); } </script> </head> <body style="font-size:30px"> <a href="javascript:;" onclick="showNumber();">点击此处</a> <div id="d1"></div> </body></html>ActionServlet.java
package web;import java.io.IOException;import java.io.PrintWriter;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring( uri.lastIndexOf("/")+1, uri.lastIndexOf(".")); if("getNumber".equals(action)){ Random r = new Random(); int number = r.nextInt(1000); System.out.println(number); out.println(number); }else if("check_uname".equals(action)){ try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } String username = request.getParameter("uname"); System.out.println("username:"+username); if("Tom".equals(username)){ out.print("no");//不要换行 }else{ out.print("yes"); } } out.close(); }} 0 0
- Ajax
- Ajax
- AJAX
- AJAX
- AJAX
- AJAX
- AJAX
- ajax
- ajax
- Ajax
- ajax
- ajax
- AJAX
- Ajax
- Ajax
- Ajax
- ajax
- ajax
- actionInvocation.invoke()是什么意思
- Mybatis3源码分析(22)-总结
- js 数组的操作
- 转战Android Studio 三
- LeetCode之Backtracing题目汇总
- ajax
- 算法的时间复杂度和空间复杂度合称为算法的复杂度。
- 使UITextView不换行
- java 集合(2) 遍历collection集合方法 iterator / 加强型for循环
- #总结 2015.12.29
- 【BootStrap】web前端开发框架初探
- Shiro源码分析-----认证流程/授权流程----------Subject
- MapReduce多文件输出和获取驱动类传值
- RedHat ISO
