原生javascript-Ajax
日期：2014-05-16 浏览次数：20364 次
原生javascript---Ajax
比较懒，由于这个都是之前自己做的，网上这些东西多的数不胜数，但是下面是我自学后直接将总结写在了jsp里面，所以注释比真正的代码还多，里面包含了web缓存问题和乱码问题解决，这是怕我自己会以后忘记。
比较懒，由于这个都是之前自己做的，网上这些东西多的数不胜数，但是下面是我自学后直接将总结写在了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");
--------------------------------*/
var xmlhttp; //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[i]);
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?nam
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
