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 的简单用法:的更多相关文章

  1. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  2. 最简单ajax,$.post()用法

    最简单的ajax,$.post()用法 $.post("action.php",{'email':$('#email').val(),'address':$('#address') ...

  3. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  4. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  5. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  6. 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  7. Knockout简单用法

    Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...

  8. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  9. Func和Action委托简单用法

    Func和Action类是特殊的类型,它们允许你在不必指定自定义委托类型的情况下,去使用委托.在整个.NET框架中都可以使用它们.例如,在我们考察并行计算时,你也会看到这两个类的示例. 上面一段文字是 ...

随机推荐

  1. iOS socket保持后台连接 ios9.0 xcode8.0

    可以保持后台,但申请上架是肯定会被拒的 本教程是基于AsyncSocket库的简单开发! socket机制今天就不说了,毕竟百度上太多太详尽了! 1.先new一个工程: ​2.要写socket的界面遵 ...

  2. ArcMap常用VBA

    --点坐标X VBA部分: Dim pGeo As IGeometry Set pGeo = [Shape] Dim pPoint As IPoint Set pPoint = pGeo 赋值部分: ...

  3. C# 3D效果饼状图的绘制

    第一步:放置图表控件 拖动工具栏的Chart控件到界面上 然后选中控件,设置Series属性,将ChartType属性改为pie 第三步:设置3D效果 选择控件,设置ChartArea属性,如下 设置 ...

  4. C++11 auto_ptr 的问题

    auto_ptr作为最早的智能指针,可以实现以RAII手法管理堆区对象,但它设计的本意只是简单的利用C++对于栈区对象的自动析构管理堆区对象, 并不像shared_ptr那样包含引用计数,可以在每次拷 ...

  5. understand equal and gethashcode

    Supposed we have a class below public class TestHash { public int x; int y; public TestHash(int x, i ...

  6. html 涂改图片功能实现

    网页源码直接贴了: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. jQuery外部框架浅析

    (function(window, undefined) {         var jQuery = ...         ...             window.jQuery = wind ...

  8. Adobe Dreamweaver代码编辑

    Adobe Dreamweaver 同义词 DW(Adobe Dreamweaver的缩写)一般指Adobe Dreamweaver Adobe Dreamweaver,简称“DW”,中文名称 &qu ...

  9. CentOS7.1配置源

    现在网上最新的是CentOS7.1, 但是在配置国内流行的163源的时候,网上的文章大多数我这里都通不过. 错误信息大概是: One of the configured repositories fa ...

  10. [.NET] 自己实现任务池(模仿线程池)

    线程池虽然好用,但限制也不少: (1)总觉得默认的 MaxThread 小了一点,每次使用都要手工调大= = (2)任务不能等待完成 (3)任务一旦加入不能取消,甚至不知道是正在排队/正在执行/执行完 ...