var xmlhttp ;
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持此方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE 创建 IE 兼容对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //老版本IE创建IE兼容对象(Microsoft.XMLHTTP)
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
Ajax请求函数：
function sendRequest(){
var url = "http://127.0.0.1:8080/ch19_1/ajaxServlet?action=send";
CreateXMLHttp(); //创建Ajax对象函数的调用
if(xmlhttp){
xmlhttp.open("GET",url, true);
xmlhttp.onreadystatechange = getResult; //返回结果处理函数的调用
xmlhttp.send(null);
}
}
function getResult(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var type = xmlhttp.responseXML.getElementsByTagName("type_name");
var str=new Array();
for(var i=0;i< type.length;i++){
str[i]=type[i].firstChild.data;
document.all['td'].innerHTML+=str[i]+"";
}
}
}
XMLHttpRequest 对象的三个重要的属性：
onreadystatechange 属性---存有处理服务器响应的函数
readyState 属性---存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
responseText 属性---通过 responseText 属性来取回由服务器返回的数据
这里要注意xmlhttp.readyState 的状态值，不同的值代表不同的状态：
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Send Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
例子1：
客户端脚本：
<html>
<body>
<script type="text/javascript">
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.jsp",true);
xmlHttp.send(null);
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
服务器端脚本：time.jsp
<%
response.expires=-1
response.write(time)
%>
Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。
例子2：
Get请求和Post请求的区别：
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
3.get请求需注意缓存问题,post请求不需担心这个问题
4.post请求必须设置Content-Type值为application/x-form-www-urlencoded
5.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function btn_get_click() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
//添加参数,以求每次访问不同的url,以避免缓存问题
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)
+ "&age=" + encodeURIComponent(age) + "&random=" + Math.random());
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,参数为null
xmlHttp.send(null);
}
function btn_post_click() {
var xmlHttp = window.XMLHttpRequest ?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
var data = "username=" + encodeURIComponent(username)+ "&age=" + encodeURIComponent(age);
//不用担心缓存问题
xmlHttp.open("post", "Server.aspx", true);
//必须设置,否则服务器端收不到参数
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求,要data数据
xmlHttp.send(data);
}
</script >
</head>
<body>
<label for="txt_username">
姓名:</label>
<input type="text" id="txt_username" />
<br />
<label for="txt_age">
年龄:</label>
<input type="text" id="txt_age" />
<br />
<input type="button" value="GET" id="btn_get" onclick="btn_get_click();" />
<input type="button" value="POST" id="btn_post" onclick="btn_post_click();" />
<div id="result">
</div>
</body>
</html>
相关推荐
包含翻译后的API文档：jetty-util-ajax-9.3.19.v20170502-javadoc-API文档-中文(简体)版.zip； Maven坐标：org.eclipse.jetty:jetty-util-ajax:9.3.19.v20170502； 标签：eclipse、jetty、util、ajax、中文文档、jar...
【标题】"Google-AJAX-Search-API.rar" 涉及的是谷歌的 AJAX（Asynchronous JavaScript and XML）搜索 API，这是一个允许开发者在他们的网页上嵌入动态、实时的谷歌搜索功能的技术。这个API利用了AJAX技术，使得用户...
包含翻译后的API文档：jetty-util-ajax-9.3.19.v20170502-javadoc-API文档-中文(简体)-英语-对照版.zip； Maven坐标：org.eclipse.jetty:jetty-util-ajax:9.3.19.v20170502； 标签：eclipse、jetty、util、ajax、...
Ajax-backend-api.zip,第一，第一。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
javax.servlet-api-***.jar中文文档.zip,java,javax.servlet-api-***.jar,javax.servlet,javax.servlet-api,***,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,javax,servlet,api,中文API文档,手册,开发...
Ajax-thinkful-api-capstone-trip-planner.zip,Thinkful API Capstone项目使用OpenWeatherMap和Foursquare API创建一个Web应用程序来检索天气和场馆数据,ajax代表异步javascript和xml。它是多种web技术的集合，包括...
Ajax-sinatra-api-server-toolbox.zip,sinatra api服务器工具箱（ruby、sinatra、activerecord、postgresql、json、jquery、ajax）,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml...
Ajax-vue-api-request.zip,通过使用支持Axios和Vue资源的出色组件来控制API调用,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小...
Ajax-bitbucket-api-client.java.zip,Git为JavaSUM语言的Bit Sub®云的客户端API转换了源代码库。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页...
总之，"ajax-upload"是jQuery生态中一个实用的上传工具，通过其强大的API和示例，开发者可以快速构建具有高级特性的文件上传功能，为用户带来流畅的网页体验。在实际项目中，合理运用"ajax-upload"可以显著提升Web...
这个项目使用ajax来发送请求，node.js来处理api。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下...
5. **强大的API**：Ajax-ext提供了丰富的API，涵盖了大部分Web开发所需的功能，如数据管理、UI渲染、动画效果等。 6. **示例丰富**：框架自带各种示例，帮助开发者快速理解和上手，这些示例涵盖了常见应用场景，...
Ajax-GitHubAPI-CodeIgniter-SemanticUI.zip,使用github api、codeigniter和前端框架语义ui构建的showcase,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建...
- **新API集成**：可能增加了对新API的支持，便于与其他系统集成，实现自动化监控。 - **更好的错误处理**：错误报告和处理机制得到改进，提供更准确的故障排查信息。 3. **安装与使用**： 包含的“dynatrace-...
javax.servlet-api-3.1.0.jar
Ajax-Bridge 使用XMLHttpRequest对象（或现代浏览器中的fetch API）来发送异步请求到服务器，并接收返回的数据。它的核心功能是创建一个接口，该接口能够透明地处理前端和后端之间的通信。这个桥梁的建立使得开发者...
4. 其他依赖库：可能包括Servlet API、Commons Lang、Freemarker或Velocity模板引擎、OGNL表达式语言等。 使用这些库和插件时，开发者需要在Struts配置文件中定义AJAX和JSON相关的配置，比如指定AJAX结果类型或者...
"xe-ajax-mock1.5.7.js" 是一个专门为这种模式设计的前端虚拟服务插件，它基于XEAjax进行了扩展，主要目的是在后端API未准备好或者无法实时访问时，为前端提供模拟数据，让前端开发能够正常进行。 首先，我们来了解...
【标题】"YouTube Dynamic AJAX - JSON Search API Demo" 涉及的是利用AJAX（Asynchronous JavaScript and XML）技术和YouTube的JSON（JavaScript Object Notation）搜索API来创建一个动态的视频搜索应用程序。...