复习下 AJAX
什么是AJAx:Asynchronous Javascript and XML
中文意思:异步JavaScript 和XML
批一种创建交互式网页应用的网页开发技术。
AJAX优点
1.Ajax 在本质上是一个浏览器端的技术。
2.Ajax技术之主要目的在于局部交换客户端及服务器间的数据。
3.这个技术的主角XMLHttpRequest的最主要特点,在于能够不用重新载入版面来更新资料,也就是所谓的Refresh withou Reload(轻刷新)
4.与服务器之间的沟通,完全是透过Javascript来实现的。
5.使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序。
6AJX就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或Dom来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以少去了网页重载的麻烦,使用者也感受不一以等待的痛苦。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function createXhr() {
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP");//ie msxml 3.0
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP")//ie msxml 2.6
}
catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != "undefined") //Firefox,Opera 8.0 Safari
{
xhobj = new XMLHttpRequest();
}
return xhobj;
}
window.onload = function () {
document.getElementById("btnLoginGet").onclick = doLoginGet;
document.getElementById("btnLoginPost").onclick = doLoginPost;
}
function doLoginGet() {
//获取异步对象;
var xhr = createXhr();
//设置好参数 请求方式,请求URL,是否启用异步
xhr.open("get", "LoginAjax.ashx", true);
//设置get方式不使用缓存
xhr.setRequestHeader("if-Modlfied-Sine", 0);
//设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
xhr.onreadystatechange = function () {
//当readyState=4的时候,就说明 异步对象已经 从服务器获得了返回的数据
if (xhr.readyState == 4) {
var res = xhr.responseText;
alert(res);
//获得响应报文头所有信息
var headerInfo = xhr.getAllResponseHeaders();
alert(headerInfo);
}
};
xhr.send(null);
}
function doLoginPost() {
//获取异步对象;
var xhr = createXhr();
//设置好参数 请求方式,请求URL,是否启用异步
xhr.open("post", "LoginAjax.ashx", true);
//指定数据提交格式
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//设置get方式不使用缓存
xhr.setRequestHeader("if-Modlfied-Sine", 0);
//设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
xhr.onreadystatechange = function () {
//当readyState=4的时候,就说明 异步对象已经 从服务器获得了返回的数据
if (xhr.readyState == 4) {
//判断服务器返回的状态码是否为 200 否则就是服务器端发生了意外
if (xhr.status == 200) {
var res = xhr.responseText;
alert(res);
//获得响应报文头所有信息
var headerInfo = xhr.getAllResponseHeaders();
alert(headerInfo);
}
else {
alert("对不起服务器繁忙~~~~~");
}
}
};
xhr.send("txtName=孙业宝&&Pwd=123");
}
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="txtName" id="txtName" /><br />
<input type="text" name="txtPwd" /><br />
<!--<input type="text" name="txtCode" />
<img title="点击换验证码" onclick="this.src ='LoginVode.ashx?i=' +new date();" align="middle" src="LoginVode.ashx" /><br />-->
<input type="button" id="btnLoginGet" value="登录 By Get" />
<input type="button" id="btnLoginPost" value="登录 By Post" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJAX
{
/// <summary>
/// LoginAjax 的摘要说明
/// </summary>
public class LoginAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
增加 js验证主要是为了用户的更好体验,如果用户禁用了Js照样 可以传到服务器,白浪费时间,减少服务器的压力。
复习下 AJAX的更多相关文章
- MVC 下 ajax调用 日期差值计算
背景: 服务项目已有服务期起止时间From-To 现在要根据用户输入的新的起始时间, 和该服务期的原有区间值, 计算出新的服务期截止时间 即 NewServiceToDateTime = NewSer ...
- ie8或9下ajax跨域问题
ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...
- 重写了下Ajax请求Webservice,顺便复习一下Javascript的闭包概念
var AjaxRequest = function(){ //返回处理结果的回调函数 this.agentCallBack = {}; //javascript 调用domino代理的方法. thi ...
- SpringMVC下Ajax请求的方法,@Responsebody如果返回的是布尔值,ajax不会接到任何回传数据
SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...
- IE浏览器下ajax缓存导致数据不更新的解决方法
摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,I ...
- 七牛---以一个七牛上传的实例小结下AJAX跨域【转】
http://blog.csdn.net/netdxy/article/details/50699842 使用七牛过程中,很多用户或多或少遇到跨域的问题,这篇文章主要介绍下跨域的概念来看什么情况下会出 ...
- 关于IE下AJAX的问题探讨
今天JS练手的时候,想封装一个发送AJAX请求的对象,当然,是想要兼容全浏览器的.代码如下: var Ajax = { xhr: null, callback: null, XMLHttp: func ...
- ***Jquery下Ajax与PHP数据交换
一.前台传递字符串变量,后台返回字符串变量(非json格式) Javascript代码: 这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对 ...
- IE9下Ajax缓存问题
使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 $.getJSON(webApp + "/G ...
随机推荐
- activiti自定义流程之Spring整合activiti-modeler5.16实例(七):任务列表展示
注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建 (2)创建流程模型:activiti自定义流程之Spring ...
- haproxy实现负载均衡
一.安装tar zxvf haproxy-1.4.22.tar.gzcd haproxy-1.4.22make TARGET=linux26 PREFIX=/usr/local/haproxy ins ...
- Team Foundation Server
概述 (通常记作“TFS”) 是一种为 Microsoft 产品提供 源代码管理. 数据收集. 报告和项目跟踪,而为协作 软件开发 的项目. 可作为独立的软件,或 Visual Studio Team ...
- eclipse eayExplorer 查看代码的资源管理器打开方式
http://blog.csdn.net/w709854369/article/details/6599167 http://blog.samsonis.me/wp-content/uploads/2 ...
- windows下boost库的基本使用方法
因为boost都是使用模板的技术,所以所有代码都是写在一个.hpp头文件中.这样boost中的大部分内容是不需要编译生成相应的链接库,只需要设置下面的包含目录(或者设置一下环境变量),在源文件中包含相 ...
- POJ 2318 TOYS(计算几何)
题目大意:有一个矩形盒子,盒子里会有一些木块线段,并且这些线段是按照顺序给出的,有n条线段,把盒子分层了n+1个区域,然后有m个玩具,这m个玩具的坐标是已知的,问最后每个区域有多少个玩具 解题思路:因 ...
- CLR和JIT
在使用IDE进行编译的时候,这个过程具体的叫法是,使用编译器面向CLR来生成代码.对于不同的开发语言,使用的的编译器也不一样,但是生成的代码都一样. “无论选用哪一个编译器,结果都是一个托管模块.” ...
- CLR via C#笔记
第一部分 CLR基础 CLR和JIT “运行时”如何解析类型引用 第二部分 设计类型 使用C#的is和as操作符来转型 运行时的相互联系 基元类型.引用类型和值类型 值类型的装箱和拆箱 哈希码 dyn ...
- [ActionScript 3.0] AS3 访问舞台上元件的方法
文档类: package { import flash.display.MovieClip; public class Main extends MovieClip { public function ...
- TOP/ORDER BY 顺序(转)
问题重现: --建表语句,测试数据 ),CreateTime datetime) go ) begin insert into TestTable )),DATEADD(day,@Count,GETD ...