在jsp中怎么运用ajax

在jsp中怎么运用ajax,第1张

使用Ajax的主要过程包括

1、创建XMLHttpRequest对象

2、设置回发函数,

3、指定信息发送位置、提交的方式和异步与否,

4、发送请求

javaScript代码如下所示:

1: <script type="text/javascript">

 2:  var XMLHttpRequestIns = null

 3:  

 4:  function AjaxF() {

 5:  //创建Ajax核心对象并传递参数

 6: CreateXMLHttpRequest()

 7:  //设置参数

 8: XMLHttpRequestIns.onreadystatechange = handleStateChange//设置回发函数

 9:  //获取内容的位置

 10: XMLHttpRequestIns.open("GET", "XMLFile1.xml", true)

 11:  //发送

 12: XMLHttpRequestIns.send(null)

 13: }

 14:  function CreateXMLHttpRequest() {

 15:  if (window.ActiveObject) {

 16: XMLHttpRequestIns = new ActiveXObject("Microsoft.XMLHTTP")

 17: }

 18:  else if(window.XMLHttpRequest )

 19: {

 20: XMLHttpRequestIns = new XMLHttpRequest()

 21: }

 22: }

 23:  //对返回数据进行处理

 24:  function handleStateChange() {

 25:  if (XMLHttpRequestIns.readyState == 4) {

 26:  

 27:  if (XMLHttpRequestIns.status == 200) {

 28: alert("服务器消息" + XMLHttpRequestIns.responseText)

 29: }

 30: }

 31: }

 32: </script>

Ajax其实非常简单,楼上列举的是封装了Ajax的第三方包,不适合初学者,只会让Ajax看起来更复杂。

Ajax就是对象XMLHttpRequset的使用。

XMLHttpRequest 简介

要真正实现这种绚丽的奇迹,必须非常熟悉一个 JavaScript 对象,即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个 方法和属性。

open():建立到服务器的新请求。

send():向服务器发送请求。

abort():退出当前请求。

readyState:提供当前 HTML 的就绪状态。

responseText:服务器返回的请求响应文本。

<script language="javascript" type="text/javascript">

var request = new XMLHttpRequest()

var url = "a.jsp?paramName=paramValue"//你要访问的服务器端的地址和参数。

request.open("GET", url, true)

request.onreadystatechange = updatePage

request.send(null)

function updatePage() {

if (request.readyState == 4)

if (request.status == 200)

alert(request.responseText)

}

</script>

这就是一个最简单的Ajax的例子。

这里有适合初学者学习Ajax的文章:

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/

ajax 返回的value对象的参数里面有 responseText 、responseJson

如果后台给的参数是json的,responseJson可以直接用。

否则使用responseText拿到字符串,在转成json对象(如果是json字符串,否则根据诗句情况处理)


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11767361.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存