学无止境,学习AJAX(一)

什么是AJAX?异步JavaScript和XML。

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

不会AJAX=营养不良

现在站点讲求交互~~~以前也用AJAX,但不系统不深入,所以还是老老实实系统学习一下吧。相信花的这点时间学习,对以后项目帮助是巨大的。

先学习了一个简单的例子,通过点击按钮,更新页面上的DIV,熟悉一下AJAX运作。

首先在页面上定义一个DIV标签,这个标签将负责信息显示,点击按钮后,通过LOADXMLDOX去返回服务器信息并显示在DIV标签里。

<html>
<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数:

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

OK了,这时候基本的AJAX应用架子搭出来了。

在写LoadXMLDoc之前,还必须学习一下:XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

要使用对象就必须先

创建 XMLHttpRequest 对象

:P 为了兼容老的IE~~~ 貌似马上微软都放弃IE了,吐槽一下。。。

我们应该这样创建

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

这样新老都能兼容了...

创建好对象,那么就要考虑如何与服务器交互了。

向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open()send() 方法:

举个例子:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。

  • string:仅用于 POST 请求

到底用 GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

举个例子:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

通过GET发送一些简单的信息:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
时间: 2024-10-21 01:50:47

学无止境,学习AJAX(一)的相关文章

学习ajax 总结

一.服务器客户端基础知识 通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口.这时候就可以问端口到底是什么了,简单点说端口就是计算机对外连接的出口,不同的应用程序的出口不同,所以我们可以用端口来判断是哪个应用程序,通常所说的80端口就是最www上网服务端口 在日常生活中我们记住的都是网站的域名,因为域名有意义方便记住,而ip地址不好记住比如www.baidu.com.那我们通过域名来访问网站时其实是分为

Javascript学习------ajax

原生js 封装ajax-纯粹网上直接照搬,没看懂希望下次回头看时能明白一点: <!DOCTYPE html> <html> <body> <script type="text/javascript"> // 使用原生js 封装ajax // 兼容xhr对象 var $ = { createXHR: function () { if (typeof XMLHttpRequest != "undefined") { //

对学习Ajax的知识总结

1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互,局部刷新: 1.3.Ajax 能减少服务器压力: 1.4.Ajax 能提高用户体验: 2.Ajax交互和传统交互的比较 传统交互:网页整体刷新,服务器压力大,用户体验不好: Ajax 交互:局部刷新,服务器压力小,用户体验好: 3.Ajax核心知识 3.1 XMLHttpRequest对象的创建 所

Java学习--Ajax介绍及使用

一.使用Ajax 1.什么是ajax? 是一种用来改善用户体验的技术,本质上是利用浏览器提供的一个     特殊对象(XMLHttpRequest对象,一般也可以称之为ajax对象)向     服务器发送异步请求:服务器返回部分数据,浏览器利用这些数据     对当前页面做部分更新:整个过程,页面无刷新,不打断用户的操作.     注:         异步请求,指的是,当ajax对象发送请求时,浏览器不会销毁     当前页面,用户仍然可以对当前页面做其它操作 2.获取ajax对象 funct

深入学习Ajax

1.什么是Ajax? AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML).是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax是以下几种技术的组合应用: – 基于web标准(standards-based presentation)XHTML+CSS的表示: – 使用 DOM

在学习AJAX时关于JSON有一些疑问总结

运维在日常的工作中可能会写很多脚本来完成特定的一些功能,比如运维A写个版本发布的代码,里面会有文件推送的逻辑,运维B想实现一个远程脚本执行的功能,可能在他的代码里也有文件推送的逻辑.在没有引入原子化设计的概念下,运维人员用各自的方式来实现文件推送这块的逻辑. 当然,我们封装一个组件不可能直接去使用这个tpl.而是提供一个外部组件函数,然后传递参数到这个组件函数中,组件函数不仅渲染页面(即插入组件dom),还处理相关的逻辑.如上面的rightsideBar.js就是为外部提供一个组件函数.righ

学习AJAX(一)

学习AJAX(二)

JavaScript学习总结【12】、JS AJAX应用

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的