首页 > 代码库 > ajax

ajax

2024-08-15 01:16:53   209人阅读

Ajax介绍：

　　w3school链接：http://www.w3school.com.cn/xmldom/dom_http.asp

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

　　AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

　　AJAX 是一种用于创建快速动态网页的技术

　　使用ajax目的是为了提高用户的感受，带来用户体验改变，是web优化一种主要手段

Ajax是什么？

　　传统web交互模型：浏览器直接将请求发送给服务器，服务器返回响应，直接发给浏览器，
      Ajax交互模型：浏览器首先将请求发送 Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给服务器；

　　　　　　　　    服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示

 

　　1、同步交互模式，客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作

　　2、异步交互模型，客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待 。

 

Ajax快速入门：

　  1. 创建XMLHttpRequest对象

　　　　　　var xmlhttp;

　　　　　　if (window.XMLHttpRequest) {

　　　　　　　　 xmlhttp=new XMLHttpRequest();

　　　　　　} else if (window.ActiveXObject) {

　　　　　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

　　　　　　}

 

　　2.注册回调函数

　　　　　　xmlhttp.onreadystatechange=function(){ };

 

　　3.使用open方法建立与服务器的连接：只是用于设置请求方式 以及url,它不发送请求.

　　　　　　xmlhttp.open(method, url, async, username, password); //请求法师，资源路径，后面3个可以省略

　　　　　　注：GET请求的参数一般加在url后面

 

　　4.向服务器端发送数据：它是用于发送请求的。

　　　　　　xmlhttp.send(null);

　　　　　　// null代表没有参数 

　　　　　　 // 如果有参数可以写成:"username=tom&password=123"　　(一般写POST请求的参数)

 

　　注意:如果是post请求方式，还需要设置一个http请求头。
         　　　xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

　　　　例：

　　　　　　xmlhttp.open(method, url);

　　　　　　xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

　　　　　　xmlhttp.send(null);

 

　　5.在回调函数中处理数据

　　　　(1) XMLHttpRequest对象属性 : readyState

　　　　　　　　它代表的是XMLHttpRequest对象的状态。               
               　　　　 0.代表XMLHttpRequest对象创建
                　　　　1.open操作
               　　　　 2.send操作
               　　　　 3.接收到了响应数据，但是只有响应头，正文还没有接收。
               　　　　 4.所有http响应接收完成

　　　　(2)XMLHttpRequest对象属性 : status

　　　　　　　　由服务器返回的 HTTP 状态代码，如 200 表示成功

 

　　　　(3)通过XMLHttpRequest对象获取数据

　　　　　　　　1.responseText

           　　　　2.responseXML

 

 

JSON插件：

　　　　是一种javascript轻量级数据交互格式，主要应用于Ajax编程。在java中，可以通过jsonlib插件，在java对象与json之间做转换。

 

 

 

 

案例：

 

1.验证用户名是否可以使用

 

<html>  <head>    <title>ajax验证用户名是否可用</title>        <script type="text/javascript">                                window.onload=function(){                                    var reg = document.getElementById("username");                                        reg.onblur=function(){                        //获取XMLHttpRequest对象                        var xmlhttp;                        if (window.XMLHttpRequest){                          xmlhttp=new XMLHttpRequest();                        }else if (window.ActiveXObject){                          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                        }                                                xmlhttp.onreadystatechange=function(){                            if(xmlhttp.readyState==4 && xmlhttp.status==200){                                document.getElementById("myspan").innerHTML=xmlhttp.responseText;                            }                        };                                                xmlhttp.open("GET", "${ pageContext.request.contextPath }/registerservlet?username="+reg.value);                        xmlhttp.send(null);                    };                };    </script>  </head>    <body>          <input type="text" name="username" id="username" ><span id="myspan"></span>          <br>          <input type="button" value="http://www.mamicode.com/注册">  </body></html>

 

public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");
        if("lihaotian".equals(username)){            response.getWriter().print("<font color=‘red‘>用户名已被注册</font>");        }else{            response.getWriter().print("<font color=‘blue‘>用户名可以使用</font>");        }    }

 

 

 

2.显示商品信息　　

　　

 


               

　　　　　　

 

　　　　　　

 

 

 

　　

　　　　

　　　　　　

 

ajax


联系
我们