java实现ajax_Ajax&Java

java实现ajax_Ajax&JavaAJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML)是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:xmlhttp=newXMLHttpRequest();//创建XMLHttpRequest对象…

大家好,又见面了,我是你们的朋友全栈君。

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)

是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。

用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:

xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象

xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数

xmlhttp.open(“GET”, url, true); //打开指定的url

xmlhttp.send(); //发送请求

这发送的是一个GET请求,如果要发送POST请求要记得设置请求投(GET请求数据可以通过url附加,POST请求可以发送时附加)

xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象

xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数

xmlhttp.open(“POST”, url, true); //打开指定的url

xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”) //设置请求头

xmlhttp.send(data); //发送请求,并附加数据

注意:回调函数务必在发送请求前设置

回调函数的内容:

if (xmlhttp.readyState == 4) {

if (xmlhttp.status == 200) {

var data = xmlhttp.responseText;

var test = document.getElementById(“test”);

test.innerHTML += data + “
“;

}

}

其中xmlhttp.readyState表示请求执行的状态(4表示请求完成),而xmlhttp.status表示http的响应返回状态码。

下面写一个小例子实现Ajax向后端请求数据:

服务端代码(Java实现)

@WebServlet(name = “AddServlet”, urlPatterns = “/AddServlet”)

public class AddServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.getWriter().write(“helloworld”);

}

}

客户端代码:

var xmlhttp;

function loadGetHttp(url, f) {

xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象

xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数

xmlhttp.open(“GET”, url, true); //打开指定的url

xmlhttp.send(); //发送请求

}

function loadPostHttp(url, data, f) {

xmlhttp = new XMLHttpRequest(); //创建XMLHttpRequest对象

xmlhttp.onreadystatechange = f; //设置请求完成后的回调函数

xmlhttp.open(“POST”, url, true); //打开指定的url

xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”) //设置请求头

xmlhttp.send(data); //发送请求,并附加数据

}

function cfunc() {

if (xmlhttp.readyState == 4) {

if (xmlhttp.status == 200) {

var data = xmlhttp.responseText;

var test = document.getElementById(“test”);

test.innerHTML += data + “
“;

}

}

}

window.onload = function () {

var button = document.getElementById(“button”);

button.onclick = function () {

loadGetHttp(“AddServlet”, cfunc);

}

}

这里写了两个通用的函数loadGetHttp和loadPostHttp来实现请求的加载,这样在使用时只要传人对应的URL和回调函数即可。

这里只是简单的举例子,实际使用中会将数据打包成XML或JSON格式,也有很多方便的实现Ajax的类库(如Jquery、EXT.JS……)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/156366.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 让新手给练了(2021年春节)

    1.概述对于一个建站新手来讲,最重要的莫过于2件事1.时间效率 2.性价比 换句话讲,对于非专业选手,在整个建站过程,如何省时省力,用相对简单的方式,花更少的钱建好网站是关键。基于上述,给大家带来一版适合新手的建站指南,供大家参考2.建站指南建站三大必备条件:域名+主机空间(虚机主机/服务器)+建站程序无论你是自己建站还是外包第三方建站,都需要具备这三个要素才能建网站。2.1.注册域名注册域名(域名就是人们常说的“网址”,好比一个网站的门牌号,不可或缺)注意事项:1.

  • 利用python建立股票量化交易系统(一)——小市值选股票模型[通俗易懂]

    利用python建立股票量化交易系统(一)——小市值选股票模型[通俗易懂]从今天开始正式开启我的博客之旅,博客内容全部是我自己的量化心得,主要还是为自己将来中工作之中遇到相似问题,可以方便的找到答案,如果能帮到有相似问题的其他同学,我也很开心,如果帮不到的话,不喜勿喷,如果文章中有什么不对的地方,欢迎批评指正。建立第一个简单的量化模型——小市值选股票模型。思路:在A股市场之中,在每个月月底的时候,按照市值排名,选择最小市值的10只股票买入,持有到下个月月底…

  • Eclipse 新手使用教程

    Eclipse 新手使用教程Eclipse是Java的集成开发环境,使用Eclipse编写Java代码更加简单和智能,那我们该如何使用Eclipse编写一个Java程序呢?一、需要在Eclipse官网(https://www.eclipse.org)上下载Eclipse,然后在电脑上安装二、打开Eclipse软件(一)选择一个工作空间的目录,建议不要放在C盘,之后创建的项目都会存放在你所选的目录下,然后点击Launch(二)可以通过Window-ShowView-Console调出控制台,方便查看程序编译时的输..

  • html空格语言,html的空格代码是什么

    html空格语言,html的空格代码是什么html的空格代码是什么发布时间:2020-06-1716:00:48来源:亿速云阅读:253作者:元一html空格代码是为html空格字符代码,由“&+n+b+s+p+;”组成,记住最后一个分号不要忘记了。CSS中当white-space属性取值为pre时,浏览器会保留文本中的空格和换行,例如:AABB显示效果为:AABBCSS的letter-spacing属…

    2022年10月28日
  • RenderControl输出html遇到的问题

    RenderControl输出html遇到的问题当我直接在后台用GridView gv=new GridView();gv.RenderControl(htmlwrite);没有问题,但是如果我从工具直接拖一个GridView到设计页面,在后台gv.RenderControl(htmlwrite);就会出现Control GridViewTotal of type GridView must be placed inside a f

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号