嘿嘿。今天学习了AJAX的几个方法
今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就来总结一下今天学习的吧。
一.在javascript中写AJAX
<script>window.onload = function () {document.getElementById("txtName").onblur = function () {var xml = new XMLHttpRequest(); //1 首先要创建异步对象xml.open("get", "JSAjax.ashx", true);//2 以get方式打开要发送的地址xml.onreadystatechange = function () {if (xml.statusText == 4) {alert(xml.responseText);//当接受状态等于4的时候,已经接受到了服务器传递过来的值。 }}xml.send(null);//发送邮件,当为get方式时间发送的请求为空 }}//window.onload = function () {// document.getElementById("txtName").onblur = function () {// var xml = new XMLHttpRequest();// xml.open("post", "JSAjax.ashx", true);// xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// xml.onreadystatechange = function () {// if (xml.statusText == 4) {// alert(xml.responseText);// }// }// xml.send("txtname="+this.value)// }//}</script> </head> <body><input type="text" name="txtname" id="txtName"/> </body> </html>
public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";string name = context.Request.QueryString["txtname"];//string name = context.Request.Form["txtname"];if (!string.IsNullOrEmpty(name)){context.Response.Write("您的用户名"+name + "可用");}else{context.Response.Write("您的用户名不可用");}}
上面是在javascript中写的ajax,Ajax在本质上是一个浏览器端的技术,Ajax技术之主要目的在于局部交换客户端及服务器间之数据,这个技术的主角XMLHttpRequest的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)与服务器之间的沟通,完全是透过Javascript来实行,使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序,AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦。使用XMLHttpRequest对象 按照下面模式,可以同步地XMLHttpRequest对象:创建对象;-new创建请求; -open()发送请求;-send(),但是使用javascript比较麻烦,于是就改变为了jquery的使用方法。
二.JQuery中写AJAX
1.AJAX的$.Load事件( url,[,data][.callback])
<script src="Scripts/jquery-1.7.1.min.js"></script><script>$(function () {$("#Send").click(function () {$("#resText").load("Ajax.ashx", { txtemail: "123@qq.com" }, function (msg) {alert(msg);});});});</script> <body><input type="button" value="AjaxLoad " id="Send"/><div class="comment">已有评论</div><div id="resText"></div> </body>
public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";string email = context.Request.Form["txtemail"];if (!string.IsNullOrEmpty(email)){context.Response.Write("<span>您的邮箱地址为"+email+"可用</span>");}else{context.Response.Write("<span>您的邮箱地址为" + email + "不可用</span>");}}
url:发送的地址,data:发送给服务器的键值对,callback:回调函数。
2.$.Get和$.Post方法
<script>$(function () {//$("#send").click(function () {// $.get("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {// $("#resText").html(msg);// });//});$("#send").click(function () {$.post("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {$("#resText").html(msg);});});});</script> <body><form id="form1" action="#"><p>评论:</p><p>姓名:<input type="text" name="username" id="username" /></p><p>内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p><p><input type="button" name="name" value="提交 " id="send" /></p></form><div class="comment">已有评论</div><div id="resText"></div> </body>
public void ProcessRequest (HttpContext context) {context.Response.ContentType = "text/plain";//string name = context.Request.QueryString["username"];//string content = context.Request.QueryString["content"];string name = context.Request.Form["username"];string content = context.Request.Form["content"];if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(content)){context.Response.Write("<span>"+name+"评论:"+content+"</span>");}}
url:发送的地址,data:发送给服务器的键值对,callback:回调函数。
3.$.ajax方法
<script>$(function () {$("#send").click(function () {$.ajax({type: "post",url: "1.js",dataType: "script",success: function (msg){alert(msg);}});});})</script>
url:发送的地址,type:请求的类型,timeout:请求时间,beforesend是在请求之前,complete:回调函数,success:成功后的回调函数。
今天就简单的总结到这里啦,已经很晚啦,嘿嘿,休息。加油加油!!!
转载于:https://www.cnblogs.com/lonelyxmas/p/4261453.html
嘿嘿。今天学习了AJAX的几个方法相关推荐
- .net ajax 怎么写,.NET学习篇--Ajax中Url的写法
.NET学习篇--Ajax中Url的写法 什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的 ...
- 前端一定得学ajax吗,前端学习之ajax
一.什么是json JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式. 它基于ECMAScript(w3c制定的js规范)的一个子集,采用完全独立于 ...
- php ci post 请求,CI框架中判断post,ajax,get请求的方法
这篇文章主要介绍了关于CI框架中判断post,ajax,get请求的方法 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 CI框架当中并没有提供,类似tp框架中IS_POST,IS_A ...
- post get mysql_jQuery – AJAX get() 和 post() 方法 | 菜鸟教程
jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据. HTTP 请求:GET ...
- ajax离开页面方法,jQuery中ajax调用当前页面方法
$.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...
- 在学习thymeleaf中,给function 方法传Controller传递过来的参数,报错:Uncaught SyntaxError: missing ) after argument list
在学习thymeleaf中,给function 方法传Controller传递过来的参数. 报错:Uncaught SyntaxError: missing ) after argument list ...
- jquery1.4.4 ajax在页面关闭时无法abort,jquery ajax abort()的使用方法
jquery ajax abort()的使用方法 由于使用的是jquery,挡在手册里没有找到关于.abort()方法,在网上搜索了一下,在http://ooxx.me/jquery-ajax-abo ...
- 强化学习(九)- 策略梯度方法 - 梯度上升,黑箱优化,REINFORCE算法及CartPole实例
策略梯度方法 引言 9.1 策略近似和其优势 9.2 策略梯度定理 9.2.1 梯度上升和黑箱优化 9.2.2 策略梯度定理的证明 9.3 REINFORCE:蒙特卡洛策略梯度 9.3.1 轨迹上的R ...
- AI佳作解读系列(一)——深度学习模型训练痛点及解决方法
AI佳作解读系列(一)--深度学习模型训练痛点及解决方法 参考文章: (1)AI佳作解读系列(一)--深度学习模型训练痛点及解决方法 (2)https://www.cnblogs.com/carson ...
- Jquery Ajax调用aspx页面方法
原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通 ...
最新文章
- koa中间件mysql写法_koa-mysql(三)
- ip转换软件在五八上能用吗?_交换机能当路由器用吗?浅谈交换器和路由器的区别...
- close wait 过多原因_time_wait 详解和解决方案
- 在写csdn博客时,如何实现用超链接进行页面内跳转?
- 一段挺有用的小SCRIPT
- ubuntu20安装teamview15
- 使用uib-tab时,获取页面输入框内容
- python 输入框查询_前端实现输入框input输入时,调用后台查询。
- GRUB legacy和GRUB 2介绍 与 命令【包含kernel 与 initrd的详解】使用
- 微生活完成3200万元A轮融资,助企业快速搭建移动互联CRM
- 服务器显示器无法调节分辨率,显示器无法设置分辨率怎么办
- 编译程序和解释程序有什么区别?
- 影音视频播放中常见八问题
- 2021-07-13 ARM cortex三个版本A、R、M简单介绍
- CSS实现3D书本效果
- 圆柱容器,横放计算液体体积
- 【ros学习】14.urdf、xacro机器人建模与rviz、gazebo仿真详解
- 读书笔记 - 《天生就会跑》
- XSLT 是什么类型的语言?
- 计算机汇编语言教程pdf,计算机汇编语言入门.pdf