InstelliJ IDEA使用js+servlet+ajax入门
对于Ajax,我们先了解三点(完整的JS代码在后面)
一、Ajax的出现对javascript的影响。
Ajax是微软提出的一种允许客户端脚本发送HTTP请求的技术(XMLHTTP),拯救了大多数java程序员讨厌的javascript
二、浏览器兼容性
想使用Ajax得创建一个对象,就是它
new XMLHttpRequest();
但是,IE的低版本不支持以上这种方式,IE真讨厌。。它支持这种方式,
new ActiveXObject("Microsoft.XMLHTTP");
三、异步与同步
通俗点的意思:
异步:就是大家想洗澡的时候一个开始脱衣服,后一个就开始脱衣服,不等前一个脱完。
同步:会等前一个人脱完再脱。。。
正题,如何使用Ajax
先创建一个web项目
打开web下的.jsp文件,首先使用html创建一个按钮,代码如下
<button onclick="ck();">点击</button>
然后在js部分我们先创建一个函数,叫做ajax_test(),代码如下
fuction ajax_test(){ }
上面我们说过了使用Ajax需要创建一个对象,但是需要判断是否为IE或者其他浏览器,代码如下
if(XMLHttpRequest){
return new XMLHttpRequest();
}else if(ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("其他浏览器!");
}
创建一个ck()函数接收ajax_test()返回的对象,我们需要使用带这个对象的方法
function ck(){
var xhr=ajax_test():
}
在这个对象中有两个方法,open()和send(),写入ck()中,分别用来准备和发送,
function ck(){
var xhr=ajax_test();
xhr.open("GET","/ajax_test/p1/Servlet1",true);
xhr.send();
}
本来我们提交到服务器的需要用到表单,这会刷新一次网页,但是使用ajax可以实现局部刷新,所以open()代替了原来的表单提交。
open共有五个参数,后面两个参数为远程服务器交互的时候需要的用户名和密码,这里我们使用在同一个机器上的所以选择忽略,
第一个参数为提交的方式,为get和post提交,不区分大小写,第二个参数为Servlet的url(/项目名称/包/服务器类)可以在服务器查看request.getRequestURI(),可以在服务器查看是什么,第三个参数是否异步,可以不写,默认为异步
而我们send()的时候就会发送了。
这个时候我们在服务器写一个输出流,当Ajax访问服务器时,就会响应,
response.getWriter().print("访问到服务器");
Ajax中有一个属性为responseText,它的值为服务器响应的值,即"访问到服务器",我们需要在js的代码中打印出来,如下
function ck(){
var xhr=ajax_test();
xhr.open("GET","/ajax_test/p1/Servlet1",true);
xhr.send();
alert("send");
alert(xhr.responseText);
}
那上面的代码为什么需要在打印出responseText前先打印send呢?因为它是异步,我们发送send()的时候还没有获取到服务器的响应(还没有ok),有一个属性为readyState,它有五个值(0~4)4代表ok,我们需要等他执行完为4的时候才能获取到
服务器的响应,那我们直接同步false不就可以了吗?同步的效率比异步慢,所以这个对象里有一个可以监听的方法,onreadystatechange,它可以解决这个问题,代码如下,必须写在send()前
xhr.onreadystatechange = function(){
alert(xhr.responseText);
}
js完整代码如下,服务器的代码只有一句输出流
<script>
function ajax_test(){
if(XMLHttpRequest){
return new XMLHttpRequest();
}else if(ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("其他浏览器");
}
}
function ck(){
var xhr=ajax_test();
xhr.open("GET","/ajax_test/p1/Servlet1",true);
xhr.onreadystatechange = function(){
alert(xhr.responseTex);
}
xhr.send();
}
</script>
以上为我接触Ajax的理解,今天就到这里,有不懂的地方可以问下我,有空回复。
---2019-5-23 从沙尘暴中逃出的你已不再是跨入沙尘暴时的你《海边的卡夫卡》。
最新文章
- c# json总结
- ABP理论学习之功能管理
- php try catch throw 用法
- linux命令:whereis
- 初学Node(四)事件循环
- Cacti中文版在Centos上的安装
- 利用doScroll在IE浏览器里模仿DOMContentLoaded
- MVC——母版与分部
- Afinal载入网络图片及下载文件用法
- 至尊快速,国产语言RPP 1.83强势来袭
- 强大而容易学的JavaScript初学者可以看看。
- C#Json转DataTable
- Url的拦截问题
- [CQOI2018]解锁屏幕
- 安装mysql后必做的两件事
- ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API
- linux cat显示若干行
- 根据C#编程经验思考编程核心
- JQuery中绑定事件(bind())和移除事件(unbind())
- Scrum立会报告+燃尽图(十月二十八日总第十九次)