js-ajax的简单实例
刚接触ajax,需要把原理性的东西先弄懂,然后再去使用封装比较高级的js框架,才能更加得心应手。
html代码:
- <html>
- <head>
- <title>MyFristAjax</title>
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
- <script type="text/javascript">
- //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- var xmlHttpRequest;
- //用户名校验的方法
- function verify() {
- var success = createXMLHTTPRequest();
- if (!success) {
- return;
- }
- var userName = document.getElementById("userName").value;//获取用户名字
- //2.注册回调函数
- xmlHttpRequest.onreadystatechange = callback;
- //3。设置连接信息
- //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
- //第二个参数表示请求的url地址,get方式请求的参数也在url中
- //第三个参数表示采用异步还是同步方式交互,true表示异步
- //记住在url后面加上时间戳
- //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);
- //4.发送数据,开始和服务器端进行交互
- //同步方式下,send这句话会在服务器段数据回来后才执行完
- //异步方式下,send这句话会立即完成执行
- //xmlHttpRequest.send(null);
- }
- //回调函数
- function callback() {
- //alert(xmlHttpRequest.readyState);
- //5。接收响应数据
- //判断对象的状态是交互完成
- if (xmlHttpRequest.readyState == 4) {
- //判断http的交互是否成功
- if (xmlHttpRequest.status == 200) {
- //获取服务器器端返回的数据
- //获取服务器段输出的纯文本数据
- var responseText = xmlHttpRequest.responseText;
- //将数据显示在页面上
- //通过dom的方式找到div标签所对应的元素节点
- var divNode = document.getElementById("result");
- //设置元素节点中的html内容
- divNode.innerHTML = responseText;
- } else {
- alert("出错了!!!");
- }
- }
- }
- //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
- function createXMLHTTPRequest() {
- //1.创建XMLHttpRequest对象
- //这是XMLHttpReuquest对象无部使用中最复杂的一步
- //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
- if (window.XMLHttpRequest) {
- //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
- xmlHttpRequest = new XMLHttpRequest();
- //针对某些特定版本的mozillar浏览器的BUG进行修正
- if (xmlHttpRequest.overrideMimeType) {
- xmlHttpRequest.overrideMimeType("text/xml");
- }
- } else if (window.ActiveXObject) {
- //针对IE6,IE5.5,IE5
- //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
- //排在前面的版本较新
- var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
- for ( var i = 0; i < activexName.length; i++) {
- try {
- //取出一个控件名进行创建,如果创建成功就终止循环
- //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
- xmlHttpRequest = new ActiveXObject(activexName[i]);
- break;
- } catch (e) {
- }
- }
- }
- //确认XMLHTtpRequest对象是否创建成功
- if (!xmlHttpRequest) {
- alert("XMLHttpRequest对象创建失败!!");
- return false;
- } else {
- //0 - 本地响应成功
- //alert(xmlhttp.readyState);
- return true;
- }
- }
- </script>
- </head>
- <body>
- 请输入要验证的用户名字(输入admin试试):<br/>
- <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
- <div id="result"></div>
- </body>
- </html>
和servlet交互的,OriginalityAjaxAction.java代码如下:
- package web.action;
- import java.io.IOException;
- import java.io.PrintWriter;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- //对原始的ajax页面请求的控制器
- public class OriginalityAjaxAction extends HttpServlet {
- private static final long serialVersionUID = 1978049925174268801L;
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doPost(request, response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- request.setCharacterEncoding("UTF-8");
- String username = request.getParameter("username");
- response.setCharacterEncoding("UTF-8");
- PrintWriter out = response.getWriter();
- //将数据返回给页面
- if(username.equals("admin")){
- out.print("用户:[admin]已经被使用了");
- }else{
- out.print("用户:[" + username + "]可以使用");
- }
- }
- }
web.xml的servlet配置如下:
- <servlet>
- <servlet-name>OriginalityAjaxAction</servlet-name>
- <servlet-class>web.action.OriginalityAjaxAction</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>OriginalityAjaxAction</servlet-name>
- <url-pattern>/OriginalityAjaxAction</url-pattern>
- </servlet-mapping>
以上简单的页面和servlet交互,返回一个字符串结果。
ajax的核心重要组件XMLHttpRequest
XmlHttp是什么?
最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
XmlHttp对象的属性:
XmlHttp对象的方法:
如何发送一个简单的请求?
最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
● 为得到XmlHttpRequest对象实例的一个引用,可以创建一个新的XmlHttpRequest的实例。
● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
onreadystatechange属性设置为指向JavaScript的指针.
● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。