AJAX 工作过程
(1) 创建对象(需要处理兼容性问题)
创建XMLHttpRequest对象(创建一个异步调用对象)
<!-- ie6以上 -->
var xhr = new XMLHttpRequest();
<!-- ie6及以下 -->
var oAjax = new ActiveXObject("Microsoft.XMLHTTP")
     // 兼容性处理
     try{
      var xhr = newXMLHttpRequest();
     }catch(e){
      var xhr = newActiveXObject("Microsoft.XMLHTTP");
     }
(2) 连接服务器
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息(get或post、url、同步或异步,默认异步为true)
xhr.open("get/post","1.php?username=Jack&age=12",true);
(3) 发送HTTP请求
xhr.send();
(4) 设置响应HTTP请求状态变化的函数
oAjax.onreadystatechange = function(){ //当请求状态改变时要调用的事件函数 }
(5) 获取异步调用返回的数据
xhr.onreadystatechange = function(){
if(xhr.readyStat e== 4 && xhr.status == 200){
<!-- responseText就是返回的数据 -->
alert(xhr.responseText);
}
}
(6) 使用JavaScript和DOM实现局部刷新
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("myId").innerHTML=xhr.responseText;
}
}
AJAX 的缺点:
1、ajax 不支持浏览器 back 按钮。
2、ajax 存在安全性问题,暴露了与服务器交互的细节。
3、ajax 对搜索引擎的支持比较弱。
 

AJAX 过程总结的更多相关文章

  1. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...

  2. Ajax过程

    http://www.cnblogs.com/daicunya/p/6227550.html 1.创建XMLHttpRequest对象,也就是创建一个异步调用对象. 2.创建一个新的HTTP请求,并指 ...

  3. 用js写个原生的ajax过程

    var xhr=new XMLHttpRequset(); xhr.addEventListener("load",loadHandler); xhr.open("GET ...

  4. JQuery Ajax执行过程AOP拦截

    JQuery Ajax过程AOP:用于在Ajax请求发送过程中执行必备操作,比如加载数据访问令牌. $.ajaxSetup({ type: "POST", error: funct ...

  5. Ajax完整篇(转载)

    Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...

  6. ajax详细介绍

    a.什么是Ajax    Asynchronous JavaScript and XML(异步JavaScript和XML)     节省用户操作,时间,提高用户体验,减少数据请求    传输获取数据 ...

  7. 基于PHP的AJAX学习笔记(教程)

    本文转载自:http://www.softeng.cn/?p=107 这是本人在学习ajax过程所做的笔记,通过本笔记的学习,可以完成ajax的快速入门.本笔记前端分别使用原生态的javascript ...

  8. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  9. AJAX 页面数据传递

    $.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...

随机推荐

  1. web应用配置文件详解(web.xml)

    转载链接地址:http://blog.csdn.net/guihaijinfen/article/details/8363839 <?xml version="1.0" en ...

  2. RAC数据库的RMAN备份异机恢复到单节点数据库

    1.首先在rac环境用rman备份数据库.[oracle@rac1 admin]$ rman target /run{allocate channel c1 device type disk conn ...

  3. ArcGIS Engine开发基础总结(一)

    标准Engine功能 地图浏览    地图制作 数据查询 数据分析 及 所有的开发控件 —MapControl, PageLayout, Toolbar, TOC, ArcReader 对所有矢量和栅 ...

  4. JSF标签之f:facet 的用法

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/33717091 f:facet标签用来 ...

  5. logstash.conf 根据不同地址创建索引

    input { http { host => "0.0.0.0" port => 9700 type => "from_ys" }}input ...

  6. laravel框架之blade模板引擎

    ## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...

  7. JavaScript中烧脑的&&和||

    在js中经常能看到以下的写法: var obj1 = a || b || c; var obj2 = a && b && c; 刚看到时,很容易认为返回的两个变量都是 ...

  8. 【模板】deque实现单调队列

    双端队列deque容器: 关于deque最常用的有这几个函数: 都是成员函数 双端队列模板题:[洛谷]P2952 [USACO09OPEN]牛线Cow Line #include<iostrea ...

  9. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  10. git 代码比较工具,分支冲突解决

    下载地址:https://www.scootersoftware.com/BCompare-4.2.9.23626.exe