<!DOCTYPE html>
<html>
<head>
<title>ajax.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
// <![CDATA[
//如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：
var global = (function () {
return this;
})();
function show(str) {
$("#div").append($("<p></p>").text("" + str));
}
//XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
$(document).ready(function() {
//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
//open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//send(string): 将请求发送到服务器。
//string：仅用于 POST 请求
//GET 还是 POST？
//与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
//然而，在以下情况中，请使用 POST 请求：
//无法使用缓存文件（更新服务器上的文件或数据库）
//向服务器发送大量数据（POST 没有数据量限制）
//发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
//服务器响应
//如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
//responseText 获得字符串形式的响应数据。
//responseXML 获得 XML 形式的响应数据。
//onreadystatechange 事件
//当请求被发送到服务器时，我们需要执行一些基于响应的任务。
//每当 readyState 改变时，就会触发 onreadystatechange 事件。
//readyState 属性存有 XMLHttpRequest 的状态信息。
//下面是 XMLHttpRequest 对象的三个重要的属性：
//onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
//readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
//•0: 请求未初始化
//•1: 服务器连接已建立
//•2: 请求已接收
//•3: 请求处理中
//•4: 请求已完成，且响应已就绪
//status
//200: "OK"
//404: 未找到页面
//GET 请求
function Ajax_Get(xmlhttp, url) {
xmlhttp.onreadystatechange = function() {
show("readyState=" + xmlhttp.readyState);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
show(xmlhttp.responseText);
show(xmlhttp.getAllResponseHeaders());
show(xmlhttp.getResponseHeader("Content-Type"));
}
};
//为了避免得到缓存的结果，可以向url添加唯一的id
var str = "";
if (url.indexOf("?") >=0 ) {
str += "&unique_id=" + Math.random();
} else {
str += "?unique_id=" + Math.random();
}
xmlhttp.open("GET", url + str, true);
xmlhttp.send();
}
//POST 请求
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
//然后在 send() 方法中规定您希望发送的数据：
function Ajax_Post(xmlhttp, url) {
xmlhttp.onreadystatechange = function() {
show("readyState=" + xmlhttp.readyState);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
show(xmlhttp.responseText);
show(xmlhttp.getAllResponseHeaders());
show(xmlhttp.getResponseHeader("Content-Type"));
}
};
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
$("#bt1").click(function () {
Ajax_Get(xmlhttp, "/StudyExample/json/JSONAction.action");
});
$("#bt2").click(function () {
Ajax_Post(xmlhttp, "/StudyExample/javascriptstudy/ajax.txt");
});
});
// ]]>
</script>
</head>
<body>
<button id="bt1">get</button>
<button id="bt2">post</button>
<div id="div"></div>
</body>
</html>
分享到：
相关推荐
JavaScript 和 AJAX 是 web 开发中的关键技术，用于创建交互式的网页应用。AJAX，全称"Asynchronous JavaScript and XML"，即异步 JavaScript 和 XML，虽然它的名字包含 XML，但实际使用中，数据格式不仅限于 XML，...
标题中的"sql c# javascript ajax"表明我们讨论的是四个关键的编程和技术概念，它们在现代Web应用程序开发中扮演着重要角色。以下是对这些概念的详细解释： 1. SQL（Structured Query Language）：SQL是用于管理和...
javascript ajax请求,和接收服务器返回数据
用javaScript Ajax访问WebServices服务器端,引用了IBM developerworks社区James Snell写的两个js文件，纯HTML页面即可调用WebServices服务！
**JavaScript、Eclipse与Ajax开发** 在IT行业中，JavaScript是一种广泛使用的客户端脚本语言，用于增强网页交互性和动态功能。Eclipse是一款强大的开源集成开发环境（IDE），支持多种编程语言，包括Java、...
o3d lib1 graph javascript ajax
JavaScript 和 AJAX 是 web 开发中的两个重要概念，它们在创建动态和交互式的网页方面起着至关重要的作用。这个"Javascript & Ajax 中文手册"是由知名的在线学习平台 w3school 提供的，它为学习者提供了丰富的教程和...
用ajax 和 JavaScript作为浏览器端， c++作为服务器端（socket写成） 自定义了一些GET和POST的语法来进行服务器和浏览器之间的通信 运行exe程序即可 远程电脑只需打开浏览器即可浏览和下载服务器电脑上的文件系统...
JavaScript AJAX（Asynchronous JavaScript and XML）技术是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它使得Web应用程序能够更加动态和响应式，提高用户体验。在本篇文章中，我们将深入...
"ajax_init_javascript_ajax_"这个标题暗示我们将讨论一个用JavaScript原生方法封装的Ajax函数，这对于高效地构建动态交互的网站至关重要。通过这个封装，开发者可以更方便地调用Ajax请求，处理服务器返回的数据，...
相关文章：https://blog.csdn.net/superwebmaster/article/details/80678590 如有问题，下载文件内含有联系方式，可以一起讨论技术。
Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行交互，通过XML、JSON或其他...
JavaScript AJAX（Asynchronous JavaScript and XML）是Web开发中一种用于创建动态、交互性网页的技术。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，极大地提升了用户体验。AJAX的...
在本项目中，JavaScript可能用于处理用户输入、更新DOM（Document Object Model）、执行异步通信（Ajax）等任务。它可以通过事件监听器（如`addEventListener`）响应用户的交互，使用`document.getElementById`或`...
Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。在"JavaScript语言与Ajax应用（第二版）...
ppt 学习资源这是一个很好的ppt资源
ASP.NET AJAX 深入浅出系列课程是针对开发者学习ASP.NET AJAX技术的一套系统教程，其中第19部分主要讲解了Visual Studio 2008中的JavaScript代码提示功能。这个功能极大地提升了JavaScript开发的效率，使开发者在...