步步为营-77-Ajax简介
AJax:异步JavaScript和XML.Asynchronous JavaScript and XML
优点:无刷新
1 JavaScript下的Ajax
1.1 XMLHttpRequest对象 使用ajax有一个很重要的对象XMLHttpRequest,而该对象的创建方式
var xhr = new XMLHttpRequest();//常用
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//(低版本的ie)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="01JavaScript下的Ajax.aspx.cs" Inherits="AjaxTest._01JavaScript下的Ajax" %> <!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>
function checkVal(txt) {
if (txt.value == "")
{
alert("用户名不能为空!");
return;
}
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "01JavaScript下的Ajax.aspx?name=" + txt.value, true);
xhr.send();
//回调函数:当服务器将数据返回给浏览器后,自动调用该方法
xhr.onreadystatechange = function () {
if (xhr.readyState ==) {
if (xhr.status == ) {
alert(xhr.responseText);
return;
}
}
} }
</script>
</head>
<body>
<form id="form1">
<%--当用户名失去焦点时候,检验用户是否存在--%>
用户名:
<input type="text" id="UserName" value="" onblur="checkVal(this)" /><br />
密码:
<input type="text" id="UserPwd" />
</form>
</body>
</html>
Ajax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace AjaxTest
{
public partial class _01JavaScript下的Ajax : System.Web.UI.Page
{
public void Page_Load(object sender, EventArgs e)
{
if (Request["name"]!=null)
{
if (Request["name"] == "张三")
{
Response.Write("用户名已占用");
Response.End();
}
else
{
Response.Write("恭喜你,用户名可以使用");
}
}
}
}
}
后台
1.6 post请求
xhr.open("post", "01JavaScript下的Ajax.aspx", true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=" + txt.value);
2 通常我们是直接使用jQuery来完成Ajax请求的
2.1 JQuery下的get请求
<!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 src="http://localhost:58888/JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () { $("#UserName").blur(function () {
if ($("#UserName").val() == "") {
alert("用户名不能为空!");
return;
}
//Ajax异步请求
$.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
//回调函数
function (date) {
alert(date);
}); });
});
</script>
</head>
<body>
用户名:
<input type="text" id="UserName" value="" onblur="checkVal(this)" /><br />
密码:
<input type="text" id="UserPwd" />
</body>
</html>
jQuery下的Get
2.2 JQuery下的post请求===非常简单
将 $.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
改为 $.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
2.3 JQuery下的另一种写法
//Ajax异步请求---方法二
$.ajax({
type: "post",
url: "02JQuery下的Ajax.ashx",
data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(),
success: function (msg) {
alert(msg);
}
});
<!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 src="http://localhost:58888/JQuery/jquery-1.7.1.min.js"></script>
<script>
$(function () { $("#UserName").blur(function () {
if ($("#UserName").val() == "") {
alert("用户名不能为空!");
return;
}
//Ajax异步请求---方法一
//$.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
////回调函数
//function (date) {
// alert(date);
//});
//Ajax异步请求---方法二
$.ajax({
type: "post",
url: "02JQuery下的Ajax.ashx",
data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(),
success: function (msg) {
alert(msg);
}
}); });
});
</script>
</head>
<body>
用户名:
<input type="text" id="UserName" value="" /><br />
密码:
<input type="text" id="UserPwd" />
</body>
</html>
jQuery Ajax
2.4 将Ajax的结果 返回出函数
function GetReSumBYIDs(OuGUID, CcID, BiID) {
var yearRem;
$.ajax({
url: "../Ashx/GetBudgetRemainingZLDC.ashx?OrgUnitGUID=" + OuGUID + "&CostCenterID=" + CcID + "&BudgetItemID=" + BiID,
type: "POST",
data: {},
dataType: "text",
async: false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待
//数据加载完成后才继续执行
success: function (result) {
yearRem = result;
}, error: function (msg) {
//出错
}
});
return yearRem;
}
步步为营-77-Ajax简介的更多相关文章
- PHP AJAX 简介
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...
- js进阶课程ajax简介（ajax是浏览器来实现的）
js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...
- {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)
{Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) Django基础七之 ...
- ajax简介及JS写原生ajax
ajax 1.什么是ajax ajax 的全称是Asynchronous JavaScript and XML,其中, Asynchronous 是异步的意思,指的是异步 JavaScript 和 X ...
- AJAX简介
基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...
- AJAX 简介
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- 1.AJAX简介
没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如果没有AJAX ...
- AJAX开发技术--AJAX简介
Asynchronous JavaScript and XML,异步JavaScript和XML 主要目的用于页面的局部刷新.不用全部刷新,提高性能. 在AJAX中主要是通过XMLHttpReque ...
- jQuery AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. jQuery AJAX 实例 使用 jQuery AJAX 修改文本内容 尝试一下 » 什么是 AJAX? A ...
随机推荐
- Ubuntu 16.04下安装MySQL5.7
原文链接:https://www.linuxidc.com/Linux/2017-06/144805.htm ps:ubuntu14.04下默认安装的是MySQL5.5 首先执行下面三条命令: sud ...
- Markdown超链接及脚注
Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...
- linux下 gdb+coredump 调试偶发crash的程序
1. 打开 core dump 查看是否打开 ulimit -c 如果输出0, 说明没有打开. 方法一:使用命令 ulimit -c unlimited 可以打开,但是只对当前终端有效, 方法二: 配 ...
- Python全栈（第一部分）day1
计算机基础 cpu:相当于人的大脑,用于计算. 内存:储存数据,4G,8G,16G,32G,成本高,断电即消失. 硬盘:1T,固态硬盘,机械硬盘,储存数据,应该长久保持数据,重要文件,小电影等等. 操 ...
- caffe调试
这里说一下关于如何进行Caffe的调试: 参考:https://blog.csdn.net/tsyccnh/article/details/51679121 简要说一下步骤: (1)首先对libcaf ...
- (并发编程)进程池线程池--提交任务2种方式+（异步回调)、协程--yield关键字 greenlet ,gevent模块
一:进程池与线程池(同步,异步+回调函数)先造个池子,然后放任务为什么要用“池”:池子使用来限制并发的任务数目,限制我们的计算机在一个自己可承受的范围内去并发地执行任务池子内什么时候装进程:并发的任务 ...
- T-SQL 数值函数
MS SQL Server数字函数可以应用于数值数据,并返回数值数据. 下面是带有示例的数值函数列表. ABS() 输出给定值的绝对值. 例 以下查询将输出-22的绝对值:22. Select ABS ...
- Appium新版本不再支持ByName定位了怎么办
appium版本在1.5以后就不再支持ByName的定位,本文章仅介绍在appium1.6.3/1.6.4/1.6.5版本下如何支持ByName定位,适用于安卓.在使用appium1.5之后的版本时, ...
- Spring Boot (一): Spring Boot starter自定义
前些日子在公司接触了spring boot和spring cloud,有感于其大大简化了spring的配置过程,十分方便使用者快速构建项目,而且拥有丰富的starter供开发者使用.但是由于其自动化配 ...
- C#中lock死锁实例教程
这篇文章主要介绍了C#中lock死锁的用法,对于共享资源的访问及C#程序设计的安全性而言,有着非常重要的意义!需要的朋友可以参考下 链接:http://www.jb51.net/article/543 ...