AJAX 的简单用法:
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1. XMLHttpRequest 对象;
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象:variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器的写法:
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");
} 2.向服务器发送请求:
一个简单的 GET 请求:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
3.服务器响应
responseText 属性返回字符串形式的响应:
document.getElementById("ID").innerHTML=xmlhttp.responseText;
4.onreadystatechange 事件:
属性:onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
readyState:0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
status: 200: "OK" 404: 未找到页面
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
一个简单的AJAX的例子的完整写法:
function cha(){
//创建xmlHttpRequest对象
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");
}
//向服务器发送请求,服务器根据状态响应,返回数据
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
div1.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","页面一.html",true);
xmlhttp.send();
}
AJAX 的简单用法:的更多相关文章
- ASP.NET MVC Ajax.ActionLink 简单用法
ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...
- 最简单ajax,$.post()用法
最简单的ajax,$.post()用法 $.post("action.php",{'email':$('#email').val(),'address':$('#address') ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...
- Knockout简单用法
Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- Func和Action委托简单用法
Func和Action类是特殊的类型,它们允许你在不必指定自定义委托类型的情况下,去使用委托.在整个.NET框架中都可以使用它们.例如,在我们考察并行计算时,你也会看到这两个类的示例. 上面一段文字是 ...
随机推荐
- iOS 指定圆角个数
需要实现的效果很明确,只要左上和右上两个地方圆角,以前都是通过layer 直接设置四个角都变成圆角,然后我就开始了强大的搜索功能 然后我就获得了我想要的东西 技术链接:http://www.xuebu ...
- 学习git config配置文件
设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...
- CSS巧妙实现分隔线的几种方法
单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...
- Unity Ugui射线坐标转换总结
世界空间中的点坐标转换到屏幕坐标: screenPos = RectTransformUtility.WorldToScreenPoint(cam, worldPos.transform.positi ...
- 黑马----JAVA内部类
黑马程序员:Java培训.Android培训.iOS培训..Net培训 黑马程序员--JAVA内部类 一.内部类分为显式内部类和匿名内部类. 二.显式内部类 1.即显式声明的内部类,它有类名. 2.显 ...
- 黑马程序员:Java编程_7K面试题之交通灯管理系统
=========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: 异步随机生成按照各个路线行 ...
- 【转】为现代JavaScript开发做好准备
原文转自:http://blog.jobbole.com/66135/ 今天无论是在浏览器中还是在浏览器外,JavaScript世界正在经历翻天覆地地变化.如果我们谈论脚本加载.客户端的MVC框架.压 ...
- nginx 基本操作
nginx 是什么 nginx 是轻量.高性能的网页服务器,相较 Apache 占有内存小. 下载 https://nginx.org/en/download.html 默认根目录 安装目录下的 ht ...
- 提升Nginx+PHP-FPM性能技巧
/etc/php-fpm.d 2.1进程数 php-fpm初始/空闲/最大worker进程数 pm.max_children = 300 pm.start_servers = ...
- 前端构建工具gulp入门教程(share)
参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...