javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取。能减少流量的消耗,也提高了浏览的流畅性,给用户更加友好的体验。
发送Ajax请求也就几步便可完成
第一步:创建异步对象
var xhr = new XMLHttpRequest();
这样创建的异步对象是给新版的浏览器用的,当然不乏一些用着旧版浏览器的老客户。旧版的创建方法如下:
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
这样我们可以写出如下形式来兼容两个类型的浏览器
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
第二步:设置参数
get方法:xhr.open('get', 'DataResponse.ashx', true);
post方法:xhr.open("post", "DataResponse.ashx", true);
两个方式的区别自己去百度了,无非就是通过什么方式向发送请求的地址发送数据
第三步:设置编码头
这一步其实可以忽略:
get方法:
//让get请求不从浏览器获取缓存数据(可去)
xhr.setRequestHeader("If-Modified-Sine", "0");
post方法
//编码格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
设置这个报文头的具体作用都写在了上面,貌似post方法中,这个设置编码格式是一定要弄的,不然会得不到数据
第四步:发送数据
xhr.send();
其中括号中可以放置要发送的数据,没有想发送的数据便留空。
自己做的一个小型网站来演示下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Get.aspx.cs" Inherits="test.Get" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function () {
//javascript 的Ajax get方法
document.getElementById("getAjax").onclick = function () {
//向服务器请求时间,创建异步对象
var xhr = new XMLHttpRequest();
//设置参数
xhr.open('get', 'DataResponse.ashx', true);
//让get请求不从浏览器获取缓存数据(可去)
xhr.setRequestHeader("If-Modified-Sine", "");
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == ) {
var res = xhr.responseText;
alert(res);
}
}
//发送数据
xhr.send();
}
//javascript 的Ajax Post方法
document.getElementById("postAjax").onclick = function () {
//向服务器请求时间,创建异步对象
var xhr = new XMLHttpRequest();
//设置参数
xhr.open("post", "DataResponse.ashx", true);
//编码格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == ) {
var res = xhr.responseText;
alert(res);
}
}
xhr.send();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
get请求按钮:
<input type="button" id="getAjax" value="点击发送请求"/><br/>
post请求按钮:
<input type="button" id="postAjax" value="点击发送请求"/>
</div>
<img src="test.gif" />
</form>
</body>
</html>
这样便能看到这样的效果:
在服务器端,通过判断不同的请求方式来返回不同的数据给浏览器:
public void ProcessRequest(HttpContext context)
{
if(context.Request.HttpMethod.ToLower()=="get")
{
Thread.Sleep();
context.Response.Write("这是一个get请求,成功返回数据");
}
else
{
Thread.Sleep();
context.Response.Write("这是一个post请求,成功返回数据");
}
}
这里的Thread.Sleep(1000);主要是用来模拟浏览器向服务器请求数据这个过程,然后通过中间的gif图片来判断这个Ajax异步请求是怎样一回事,可以看到点击后,有那么服务器那边停缓了一秒钟,然而整个过程中gif图片没有停下来,然后请求完毕后不能后退,因此Ajax请求后还是以前这个页面,没有跳转,这样给客户的体验就增强了。最后附上整个项目源码:
http://files.cnblogs.com/xmfdsh/javascript%E7%89%88Ajax.rar
javascript版Ajax请求的更多相关文章
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 转贴:JavaScript实现Ajax请求简单示例
转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 前端javascript发送ajax请求、后台书写function小案例
HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...
- javascript原生ajax请求
class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true ...
- JavaScript 伪Ajax请求
伪Ajax 通过iframe以及form表单,可以实现伪Ajax的方式. 并且它的兼容性是最好的. iframe iframe标签能够获取一个其他页面的文档内容,这说明它内部肯定是发送了一个请求,并且 ...
- JavaScript的Ajax请求示例
//创建XMLHttpRequest对象 var request = false; try { request = new ...
- 原生js版ajax请求
function getXMLHttpRequest() { var xhr; if(window.ActiveXObject) { xhr= new ActiveXObject("Micr ...
- PHP 判断是否为 AJAX 请求
先说前端使用 jQuery 时怎么区分: jQuery 发出 ajax 请求时,会在请求头部添加一个名为 X-Requested-With 的信息,信息内容为:XMLHttpRequest 在后端可以 ...
随机推荐
- Apache中RewriteCond规则参数介绍
Apache中 RewriteCond语句对于我来说一直是个难点,多次试图去把它搞明白,都没有结构,这次我终于算大概知道它的意思了.RewriteCond就像我们程序中的if语句一样,表示如果符合某个 ...
- BufferedInputSream和BufferedOutputSream,,,
package cd.itcast.bufferinputstream; import java.io.BufferedInputStream; import java.io.File; import ...
- java作用域public ,private ,protected 及不写时的区别(转)
在说明这四个关键字之前,我想就class之间的关系做一个简单的定 义,对于继承自己的class,base class可以认为他们都是自己的子 女,而对于和自己一个目录下的classes,认为都是自己的 ...
- C/C++ 内存管理 (《高质量C++》-- 整理笔记)
内存管理是我们在编程时经常遇到的问题,而关于内存管理的问题往往会导致我们无从下手,这篇随笔是我阅读<高质量C++>第7章“内存管理”时一些总结. 1.内存分配方式 在C++中内存分为5个区 ...
- .NET开源工作流RoadFlow-系统布署及注意事项
非常感谢您在百忙之中抽空来了解RoadFlow,下面我们说一下如果在自己本地搭建环境吧. 1.环境要求 数据库:sqlserver2005以上版本.服务器:IIS6.0以上,或iisexpress.d ...
- VPN错误800、错误789
VPN突然无法连接解决方法: 1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它:HKEY_LOCAL_MACHINE\System\C ...
- oracle 11g 表空间使用率
Oracle数据库表空间使用量查询: select b.file_name 物理文件名,b.tablespace_name 表空间,b.bytes/1024/1024 大小M,(b.bytes-sum ...
- MVC 中使用log4net 打印重复日志解决方法
最近在项目中引用log4net 来打印日志,会发现在同一时间点 打印重复记录: 详见图
- Python实现kMeans(k均值聚类)
Python实现kMeans(k均值聚类) 运行环境 Pyhton3 numpy(科学计算包) matplotlib(画图所需,不画图可不必) 计算过程 st=>start: 开始 e=> ...
- [shell基础]——整数比较;字符串比较;文件测试;逻辑测试符
整数比较方法一:[ ] 或 [[ ]] (1) 此方法需要使用整数比较运算符.[标注:equal 等于 greater 大于 less-then 小于] (2) 使用时一定要注意前后一 ...