Ajax的使用
来源:互联网 发布:膛线无缝管淘宝有售吗 编辑:程序博客网 时间:2024/05/22 13:57
Ajax概念:
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Ajax作用:
注册时,输入用户名自动检测用户是否已经存在。
登陆时,提示用户名密码错误
删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
一、使用XMLHttpRequest对象实现Ajax:
可以在菜鸟教程上学习:http://www.runoob.com/ajax/ajax-tutorial.html
XMLHttpRequest主要方法:
1. void open(String method,String url,Boolen async) 用于创建请求 参数: method: 请求方式(字符串类型),如:POST、GET、DELETE... url: 要请求的地址(字符串类型) async: 是否异步(布尔类型) 2. void send(String body) 用于发送请求 参数: body: 要发送的数据(字符串类型) 3. void setRequestHeader(String header,String value) 用于设置请求头 参数: header: 请求头的key(字符串类型) vlaue: 请求头的value(字符串类型) 4. String getAllResponseHeaders() 获取所有响应头 返回值: 响应头数据(字符串类型) 5. String getResponseHeader(String header) 获取响应头中指定header的值 参数: header: 响应头的key(字符串类型) 返回值: 响应头中指定的header对应的值 6. void abort() 终止请求
XMLHttpRequest主要属性:
1. Number readyState 状态值(整数),可以确定请求/响应过程的当前活动阶段 0:未初始化。未调用open()方法 1:启动。已经调用open()方法,未调用send()方法 2:发送。已经调用send()方法,未接收到响应 3:接收。已经接收到部分数据 4:完成。已经接收到全部数据,可以在客户端使用2. Function onreadystatechange 当readyState的值改变时自动触发执行其对应的函数(回调函数)3. String responseText 作为响应主体被返回的文本(字符串类型)4. XmlDocument responseXML 服务器返回的数据(Xml对象)5. Number states 状态码(整数),如:200、404…6. String statesText 状态文本(字符串),如:OK、NotFound…
XMLHttpRequest使用示例:
项目列表截图:
js代码;
<script type="text/javascript"> /****************一、jsp与Servlet通过Ajax进行数据交互****************///使用XMLHttpRequestvar xmlhttp;if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}function callServer(){//获取城市和国家的值var city = document.getElementById("city").value;//设置一个方法,当请求返回的时候调用这个方法xmlhttp.onreadystatechange = getSuccess;//创建连接的URL对象var url = "testAjaxServlet?city="+city;//打开一个连接服务器的连接xmlhttp.open("GET", url, true);//发送链接xmlhttp.send();}function getSuccess(){if (xmlhttp.readyState == 4 && xmlhttp.status==200) { var response = xmlhttp.responseText; document.getElementById("success").innerHTML = response;}}/****************二、jsp通过Ajax直接获取到文件内容(txt文件)****************/var xmlhttp;function loadXMLDoc(url,cfunc){if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 代码 xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}function myFunction(){loadXMLDoc("Ajax/ajax_info.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});}</script>
html代码:
<h1>一、jsp与Servlet通过Ajax进行数据交互</h1> <form action="" method="post"> <p>城市:<input type="text" name="city" id="city" size="25" onkeyup="callServer();" /></p> <p><font color="red" id="success"></font></p> </form> <h1>二、jsp通过Ajax直接获取到文件内容(txt文件)</h1> <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div><button type="button" onclick="myFunction()">修改内容</button>
TestAjaxServlet.java:
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String city = req.getParameter("city");System.out.println("城市:"+city);//返回文本数据 resp.setContentType("text/html;charset=utf-8"); PrintWriter out = resp.getWriter();out.println("您输入的城市是:"+city);this.doPost(req, resp);}
效果图:
二、使用jQuery实现Ajax:
1. jQuery.get(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。 dataType: 返回内容格式,xml, json, script, text, html2.jQuery.post(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数 success: 载入成功时回调函数 dataType: 返回内容格式,xml, json, script, text, html3.jQuery.getJSON(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。4.jQuery.getScript(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数。 success: 载入成功时回调函数。5.jQuery.ajax(...) 部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送的数据 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8") async:是否异步 timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局) complete:完成之后执行的回调函数(全局) success:成功之后执行的回调函数(全局) error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型 dataType:将服务器端返回的数据转换成指定类型 "xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式 "json": 将服务器端返回的内容转换成相应的JavaScript对象 "jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
示例:
js代码:
/****************三、jQuery Ajax例子****************/$(document).ready(function() {$("#text").keyup(function(){$.ajax({url:"testjQueryAjaxServlet?text="+$("#text").val(),type:"GET",dateType:"json",success:ok,error:err});});});function ok(d){var obj = JSON.parse(d);$("#successjQueryAjax").html(obj.ishas);}function err(){alert("出错了,请联系管理员!");}
HTML代码:
<h1>三、jQuery Ajax例子</h1><p>请输入:<input type="text" id="text" name="text" /></p> <p><font color="red" id="successjQueryAjax"></font></p>
TestjQueryAjaxServlet.java:
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String text = req.getParameter("text");String s = "{\"ishas\":\"您输入的是:"+text+"\"}";System.out.println(s);resp.setCharacterEncoding("UTF-8"); PrintWriter out = resp.getWriter();out.print(s);out.close();}
效果图:
源码下载:http://download.csdn.net/download/fancheng614/10121885
阅读全文
0 0
- **AJAX** ajax的使用
- AJAX---ajax的使用
- Ajax-jQuery的Ajax使用
- 使用Ajax的主要原因
- Ajax的初次使用
- 使用Ajax的挑战
- Ajax的DWR使用
- ajax的使用
- Jquery.ajax的使用
- Ajax的使用
- AJAX的兼容使用
- AJAX的使用流程
- Ajax控件的使用
- AJAX的使用
- jquery ajax的使用
- POST Ajax 的使用
- ajax的使用
- Ajax的使用
- void 无类型
- CentOS7防火墙配置
- java定时任务 timer
- android apk使用framework中usb接口范例(应用RtkGps分析)
- 最通俗易懂的JavaScript知识,应有尽有。
- Ajax的使用
- 关于webstorage的使用
- 应用层--计算机网络自顶向下笔记(二)
- XlistView(代码)
- #再一次用construct2做游戏
- C语言我喜欢这样写
- 垂直居中
- 构造函数和析构函数用法
- 洛谷 P1886 滑动窗口