Go语言视频零基础入门到精通

admin · 发表于 2018-5-27 12:33:59

写在前面的话:

用了很久的Asp.Net Ajax,也看了段时间的jquery中ajax的应用,但到头来,居然想不起xmlHttpRequest的该如何使用了.
以前记的也不怎么清楚,这次就重新完整的学习一遍吧,也为了自己以后能找个完整的地方来复习.

什么是Ajax

Ajax的全称是Asynchronous javascript And XML.AJax由HTML,Javascript,DHTML和DOM组成.
HTML用于建立Web表单
Javascript代码用于运行Ajax应用程序的核心代码,用于和服务器引用程序进行通信
DHTML用于动态更新表单
DOM用于处理HTML结构和服务器返回的XML
时至今日,Js中可以处理的数据包括了字符串,JSON,XML数据.

优点

通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验.

实例

get.htm页面HTML代码如下:

<body>
<label for="txt_username">
姓名:</label>
<input type="text" id="txt_username" />
<br />
<label for="txt_age">
年龄:</label>
<input type="text" id="txt_age" />
<br />
<input type="button" value="GET" id="btn" onclick="btn_click();" />
<div id="result">
</div>
</body>
复制代码

js代码如下:

<script type="text/javascript">
function btn_click() {
      //创建XMLHttpRequest对象
      var xmlHttp = new XMLHttpRequest();
      //获取值
      var username = document.getElementById("txt_username").value;
      var age = document.getElementById("txt_age").value;
      //配置XMLHttpRequest对象
      xmlHttp.open("get", "Get.aspx?username=" + username
         + "&age=" + age);
      //设置回调函数
      xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("result").innerHTML = xmlHttp.responseText;
         }
      }
      //发送请求
      xmlHttp.send(null);
}
</script>
复制代码

新建Get.aspx页,Get.aspx.cs代码如下:

protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
string username = Request.QueryString["username"];
string age = Request.QueryString["age"];
Response.Write("姓名:"" + username + ""<br/>年龄:" + age + "<br/>时间:"" + DateTime.Now.ToString() + """);
Response.End();
}
复制代码

结果:

输入姓名和年龄,点击Get按钮,就会从服务器获取到数据.

小结:

今天暂时写一个完整的例子来显示Ajax的调用过程,此例中存在许多问题:

  如何创建在大部分浏览器中都能运行的XMLHttpRequest对象.
  使用get请求时存在缓存问题
  中文乱码问题

针对这些已经出现的问题,我们在随后的例子中会一一解决.
对于其他的疑问,比方说:

  如何使用post传递数据
  post和get有什么区别
  如何使用传输和使用json数据
  如何传输和使用xml数据(毕竟,Ajax最后的一个字母x指的是XML)

对于这些疑问,我们在随后的文章里也会一一解决的.

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

[默认分类] 完整的Ajax实例

相关帖子