博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学无止境,学习AJAX(一)
阅读量:6633 次
发布时间:2019-06-25

本文共 1612 字,大约阅读时间需要 5 分钟。

什么是AJAX?异步JavaScript和XML。

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

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

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

 

不会AJAX=营养不良

 

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

 

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

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

Let AJAX change this text

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

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();

 

转载于:https://www.cnblogs.com/vicen/p/5174986.html

你可能感兴趣的文章
html5播放mp4视频代码
查看>>
032_nginx配置文件安全下载
查看>>
Linux下tomcat修改成的80端口无法访问
查看>>
为了好好看球,学霸们用深度学习重建整个比赛3D全息图
查看>>
CentOS双机中Docker下安装Mysql并配置互为主从模式
查看>>
sql in not in 案例用 exists not exists 代替
查看>>
WEB前端资源代码:学习篇
查看>>
怎样获取Web应用程序的路径
查看>>
xcode crash 查找 EXC_BAD_ACCESS 问题根源的方法
查看>>
使用java.util.concurrent.ThreadFactory来创建线程
查看>>
中国大数据科技传播联盟在京成立
查看>>
xargs 命令
查看>>
oracle 体系结构
查看>>
Nginx+Keepalived搭建高可用负载均衡集群
查看>>
VS2015 正式版中为什么没有了函数前面引用提示了?
查看>>
windows 系统的安装和虚拟机共享文件夹
查看>>
arp协议的混乱引发的思考--一个实例
查看>>
配置XenDesktop一例报错-序列不包含任何元素
查看>>
javascript理解数组和数字排序
查看>>
微软同步框架入门之五--使用WCF同步远程数据
查看>>