AJAX

来源：互联网发布：it类书籍编辑：程序博客网时间：2024/06/03 08:54

1.1.1 AJAX的概述:
什么是AJAX:
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX完成的是页面的局部刷新的效果!!!

AsynchronousJavascriptAndXml

XMLHttpRequest属性
onreadystatechange: 用于指定XMLHttpRequest对象状态改变时的事件处理函数
readyState: XMLHttpRequest对象的处理状态
responseText: 用于获取服务器的响应文本
responseXML: 用于获取服务器的响应的XML文档
status: 服务器返回的状态码，只有服务器的响应已经完成时，才会有该状态码
statusText: 服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息

onreadystatechange 和 readyState
XMLHttpRequest对象有如下几种状态

0 :XMLHttpRequest对象还没有完成初始化
1 :XMLHttpRequest对象开始发送请求
2 :XMLHttpRequest对象的请求发送完成
3 :XMLHttpRequest对象开始读取服务器的响应
4 :XMLHttpRequest对象读取服务器响应完成
注—–>
XMLHttpRequest对象的这几个状态可以通过readyState属性读取.因此可以这样理解：每当XMLHttpRequest对象的readyState属性改变时，
其onreadystatechange属性指定的方法都会自动触发。

status 和statusText
如果请求的资源没有HTTP Status 404 表明服务器的状态码为 404表示资源不存在—–即使资源不存在，服务器一样会生产响应。这就是说，当程序
判断XMLHttpRequest的readyState为4，服务器响应已经完成时，从服务器获取的响应信息有可能是错误的。

200 :服务器响应正常
304 :该资源在上次请求之后没有任何修改，这通常用于浏览器的缓存机制，试用GET请求时尤其需要注意
400 :无法找到请求的资源
401 :访问资源的权限不够
403 :没有权限访问资源
404 :需要访问的资源不存在
405 :需要访问的资源被禁止
407 :访问的资源需要代理身份验证
414 :请求的url太长
500 :服务器内部错误

AJAX 步骤:
1.创建一个XMLHttpRequest
2.XMLHttpRequest.open(“POST/GET”,”url”,是否设置异步);
3.XMLHttpRequest状态改变触发了一个函数
4.XMLHttpRequest.send();

POST 方式需要设置:

// 设置请求头:        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        // * 4.发送数据: // POST请求传递参数:需要将参数写到send方法中.        xhr.send("id=3&name=李四");

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'reg.jsp' starting page</title>  </head>  <script type="text/javascript">  function getXMLHttpRequest(){         var xmlHttpReq=null;          if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象            xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");         }else if(window.XMLHttpRequest){             xmlHttpReq = new XMLHttpRequest();         }         return xmlHttpReq;    }  //1 的到异步对象  function fun() {      var hq = getXMLHttpRequest();      //获得用户名      var username= document.getElementById("username").value;      //获得span       var span = document.getElementById("span");      //获得注册的 元素      var i = document.getElementById("in");      //2 是设置监听      hq.onreadystatechange = function () {          if(hq.readyState==4  && hq.status==200) {              //获得响应数据             var data =hq.responseText;              if(1==data) {                  //没有人可以注册                 span.innerHTML="<font color='green'>ok</font>";                  i.style.display="block";              }else{                  span.innerHTML="<font color='red'>NO</font>";                   i.style.display="none";              }          }       }      //3 打开链接     // xhr.open("GET","${ pageContext.request.contextPath }/ajaxServletDemo2?username="+username,true);      hq.open("GET","${pageContext.request.contextPath}/Reg?username="+username,true);      //4 发送数据      hq.send(null);  }  </script>  <body>    <h1>用户注册的页面</h1><form action="" method="post">    用户名:<input id='username' type="text" name="username" onblur="fun()"/><span id="span"></span><br/>    密码:<input type="password" name="password"><br/>    <input id='in'  type="submit" value="用户注册" /></form>  </body></html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><script type="text/javascript">    //得到xml解析的省份的属性添加到第一个下拉中.    //1 得到异步对象    function fun() {        var yb = getXMLHttpRequest();        //2 监听        yb.onreadystatechange = function() {            if (yb.readyState == 4 && yb.status == 200) {                //获得省份的对象                var pro = document.getElementById("province");                //获得xml 响应的的数据                var doc = yb.responseXML;                //获的所有的省份标签                var allp = doc.getElementsByTagName("province");                //遍历标签获得属性,添加到pro 中                for ( var i = 0; i < allp.length; i++) {                    var att = allp[i].getAttribute("name");                    //创建元素节点                    var op = document.createElement("option");                    //设置属性                    op.setAttribute("value", att);                    //创建文本节点                    var te = document.createTextNode(att);                    op.appendChild(te);                    pro.appendChild(op);                }                pro.onchange = function() {                    //获得city下拉的的标签                    var city = document.getElementById("city");                    //解决添加省只添加一个                    city.length = 1;                    //获得当前选中的省份,和xml中的省份的属性相同,                    for ( var i = 0; i < allp.length; i++) {                        var pp = allp[i];                        var att = pp.getAttribute("name");                        if (this.value == att) {                            //获得这个省下面的所有城市,                            //获得所有city的标签                            var allc = pp.getElementsByTagName("city");                            //遍历添加到新的city下拉中                            for ( var x = 0; x < allc.length; x++) {                                //获得每一个city的文本 添加新建option                                 var option = document.createElement("option");                                var text = document                                        .createTextNode(allc[x].textContent);                                //alert(allc[x].textContent);                                //alert(text.nodeValue);                                option.appendChild(text);                                city.appendChild(option);                            }                        }                    }                }            }        }        //3.open         yb.open("GET", "${pageContext.request.contextPath}/Move", true);        //4.send        yb.send(null);    }    function getXMLHttpRequest() {        var xmlHttpReq = null;        if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象            xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");        } else if (window.XMLHttpRequest) {            xmlHttpReq = new XMLHttpRequest();        }        return xmlHttpReq;    }</script></head><body onload="fun()">    <h1>二级联动的页面</h1>    <select id="province">        <option>-请选择-</option>    </select>    <select id="city">        <option>-请选择-</option>    </select></body></html>

0 0