原生javascript---Ajax
比较懒，由于这个都是之前自己做的，网上这些东西多的数不胜数，但是下面是我自学后直接将总结写在了jsp里面，所以注释比真正的代码还多，里面包含了web缓存问题和乱码问题解决，这是怕我自己会以后忘记。<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>javascript中Ajax应用例子</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript">/* ---------------------------------------------------------------AJAX技术 --->XMLHttpRequest的使用步骤：1.建立XMLHttpRequest对象 -->由于不同浏览器不同，因此要针对不同浏览器而对XMLHttpRequest做不同的实例化方式2.注册回调方法3.使用open()方法设置和服务器端交互的基本信息，如：交互方法(GET/POST)、服务器地址、是否异步调度4.设置发送的数据，开始和服务器端交互5.在回调方法<在第2步中已注册>中判断交互是否结束（xmlhttp.readyState == 4），相应是否正确（xmlhttp.status == 200），并获取从服务器中返回的数据另外，XMLHttpRequest对象的状态(即：readyState的值): <其中可以用abort()方法停止当前http请求，对应的XMLHttpRequest对象会恢复到未初始化状态><请求期间，可以用onreadystatechange监听状态的变化，并调用javascript函数进行处理,详细见以下第2步><****第2步中注册的回调方法，实质上在以下各个状态改变的时候都会被调用****>0 ：未初始化状态，对象以创建，为调用open方法1：open方法调用成功后，send方法未被调用2：send方法已调用，尚未开始接受数据3：正在接收数据，http响应头信息已接收，但未接收完响应数据4：已接收完响应数据获取响应数据的方法：responseText ：服务器响应的文本responseXML ： 服务器响应的ＸＭＬ内容的ＤＯＭ对象(详细使用见下面代码)响应状态(status)：200 : 成功404 ：未找到500 ： 服务器内部错误web 请求中缓存问题：描述：由于请求中有些url前后请求的url内容都一致,导致某些浏览器会只访问浏览器的缓存而不访问服务器，导致访问的结果没有变，但是某些web应用虽然前后不同时间里的请求url都一样，但访问服务器后的结果会不一样，如： 获取验证码等,所以为了防止此问题出现可以在请求url中添加如下javascript代码：简单方式："serviceUrl?t=" + (new Date()).valueOf(); <此处的“t=" + (new Date()).valueOf();”是为了防止浏览器只访问缓存而不访问服务器才添加的一个时间戳>url地址不确定方式：var url = serviceUrl;if(url.indexOf("?") >= 0){url = url + "&t=" + (new Date()).valueOf();}else{url = url + "?t=" + (new Date()).valueOf();}中文乱码问题：描述：由于各种设置不正确或者浏览器本身问题，导致页面显示中文导致乱码。解决方法：1.寻找根源，修正问题.如：页面和服务器所用的字符集是否一致、部署的服务器或容器对字符集设置(如Tomcat)2.利用javascript和java的配合强悍的去除乱码:页面端(注：这是javascript代码,所用的函数也是javascript的函数)：var name = document.getElementById("uName");---->> name = encodeURI(encodeURI(name));服务器端(注：这里使用的是java中URLDecoder类中的方法):String oldName = request.getParameter("name");---->>String newName = URLDecoder.decode(oldName,"utf-8");--------------------------------------------------------------------*/varxmlhttp;//XMLHttpRequest对象function myFun(){//********************1.创建XMLHttpRequest对象if(window.XMLHttpRequest){//IE7+,Firefox,Mozillar,Opera等浏览器支持xmlhttp = new XMLHttpRequest();if(xmlhttp.overrideMimeType){//这是为了防止有些浏览器发送过来的文件头中没有mimetype时会导致无法工作xmlhttp.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE5+都有这个对象,以下是各个IE版本支持的XMLHTTPRequest对象 var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"]; for(var i=0; i<activexName.length; i++){ try{ xmlhttp = new ActiveXObject(activexName); break; }catch(e){ } }}//验证xmlhtp是否创建成功if(xmlhttp == undefined || xmlhttp == null){alert("当前浏览器不支持XMLHttpRequest对象，请更换浏览器");return;}//******************2.注册回调方法xmlhttp.onreadystatechange = callback;//callback是回调方法名//记忆一个固定用法，获取文本框中用户输入的内容var userName = document.getElementById("uName").value;//******************3.设置和服务器端交互的相应参数,/*open方法参数：第一个：获取方式(GET/POST),第二个：服务器地址，第三个：表示是否使用异步的方式进行交互，若为false则采用同步方式交互第四个：username、第五个：password <这两个为可选参数，当提供http认证机制需要时需要用户名和密码>*///xmlhttp.open("GET","ajaxTest1?name="+userName,true); //GET方法获取 xmlhttp.open("POST","ajaxTest1",true);xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//当使用POST时才需要这句话，刚方法必须在open方法后面调用，不然会抛异常//4.设置向服务器端发送的数据，启动和服务器端的交互//xmlhttp.send(null); //由于上面采用GET方法发送，在这里send方法里不需要填充数据，如果是POST方式就要在此方法内填充数据xmlhttp.send("name="+userName);}//回调方法function callback(){//5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据if(xmlhttp.readyState == 4){//表示和服务器端的交互已完成if(xmlhttp.status == 200){ //表示服务器端的响应代码是200，正确的返回了数据//纯文本数据的接受方法var message = xmlhttp.responseText;//XML数据对应的ＤＯＭ对象的接受方法//使用前提是服务器端要设置content-type为"text/xml"//var domxml = xmlhttp.responseXML;//显示结果数据var m = document.getElementById("msg");m.innerHTML = message;}}} </script></head> <body> <input type="text" name="name" id="uName" /><input type="submit"value="检验"/> <div id="msg"></div></body></html>
页:
[1]