Ajax的介绍和优点

Posted 2020-08-06 我的快乐888

 

        1. 局部刷新

        2. 按需取数据        

二、创建Ajax对象， 这是学习Ajax的第一步

    主要是把浏览器分成两种

一种是IE系列的浏览器（IE5.0 IE5.5 IE6.0, IE7 IE8）

一种是非IE浏览器(都是按W3C标准) FF Mozilla NetScape

abort()                    停止当前请求

getAllResponseHeaders()            作为字符串返回完整的headers

getResponseHeader("headerLabel")    作为字符串返回单个的header标签

 

send(content)                发送请求

 

onreadystatechange    状态改变的事件触发器

readyState        对象状态(integer):

                  0 = 未初始化 1 = 读取中2 = 已读取3 = 交互中4 = 完成

responseText        服务器进程返回数据的文本版本

responseXML        服务器进程返回数据的兼容DOM的XML文档对象

 

statusText        服务器返回的状态文本信息

 

 

 

    有了一个这样的页面之后，我们要回到请求页，相信学过网页的同学对script标签应该非常熟悉把，是的，接下来的代码就是要书写在script标签中。大家应该知道我们网页中是事件，如鼠标点击事件，鼠标悬停事件，键盘起落事件等等，而发送Ajax请求就是要通过事件来完成，下面我们就用代码来给大家建立一个最基本的Ajax请求：

script ="text/javascript"> functionvarnewvar url = "ajax.jsp?q=" + val; url = url + "&sid=" + Math.random(); xmlHttp.open("GET", url, true); xmlHttp.send(); document.getElementById("sun").innerhtml = xmlHttp.responseText; } scriptheadbodyforminput ="text"="tname"="" /> <type name value onclickform 你提交的数据是： span ="sun"></> </> </>

因为要对数据进行的操作很少，所以ajax.jsp页面的代码异常简单：

body<% name = request.getParameter(); out.print(name); %> bodyhtml

script ="text/javascript"="jQuery1.11.1.js"></> <type sayHi(){ $.ajax({ cache: , type: "POST", url:"ajax.jsp", data:$(‘#frm‘).serialize(), async: , error: (request) { alert("请求失败！"); }, success: (data) { $("#d").html(data); } }); } scriptheadbodyform ="frm" > <type name valueinput ="button"="提交"="sayHi();"/> <iddivformbodyhtml

body<% userName = request.getParameter(); out.print(userName+); %> bodyhtml