比较懒,由于这个都是之前自己做的,网上这些东西多的数不胜数,但是下面是我自学后直接将总结写在了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 : 服务器响应的XML内容的DOM对象 (详细使用见下面代码)
响应状态(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?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数据对应的DOM对象的接受方法
//使用前提是服务器端要设置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" onclick="myFun()" value="检验"/>
<div id="msg"></div>
</body>
</html>
分享到:
相关推荐
JavaScript案例-原生ajax
JavaScript案例-原生ajax查询所有用户
原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,
Ajax-ajax-.zip,一、获得职位,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体:请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async,await、git仓库...
基于原生javascript封装的Ajax插件,含Node测试接口
原生JavaScript实现Ajax的方法_.docx
实例讲解用法原生JavaScript处理AJAX恳求的方法_.docx
原生ajax库,实现jsonp跨域,短小精悍。
javascript原生ajax写法分享_.docx
主要介绍了原生JavaScript实现Ajax的几种方法,感兴趣的小伙伴们可以参考一下
模块是用原生 javascript 编写的,具有简单的 AJAX 需求。 一个简单的 GET 调用在一个地方,所以我使用了作为代码的基础来进行 AJAX 调用。 代码运行良好,没有任何问题。 通常我在用于项目的任何框架/库中使用 ...
原生Ajax 使用先安装PHP环境,apache服务器
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了实例讲解使用原生JavaScript处理AJAX请求的方法,这样就算是利用原生API而脱离了jQuery中的Ajax方法,需要的朋友可以参考下
现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获取服务器端的功能来展示如何使用纯javascript实现ajax功能...
主要介绍了原生javascript AJAX 三级联动的实现代码,非常不错代码简单易懂,具有一定的参考借鉴价值,需要的朋友可以参考下
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的...
其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一、AJAX AJAX的核心是XMLHttpRequest。 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接...