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. .net 和 core 数据库连接字符串

    Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...

  2. codeforces 432E Square Tiling

    codeforces 432E Square Tiling 题意 题解 代码 #include<bits/stdc++.h> using namespace std; #define fi ...

  3. BZOJ2435:[NOI2011]道路修建 (差分)

    Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1条双向道 ...

  4. P3558 [POI2013]BAJ-Bytecomputer

    题目描述 A sequence of integers is given. The bytecomputer is a device that allows the following operati ...

  5. 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    首先把 node_modules 文件夹删除 然后运行以下命令: cnpm install 这样就可以正常运行

  6. Kubernetes 1.6新特性

    Kubernetes 1.6已结发布,包括9个Stable特性.12个Beta特性.8个Alpha特性,共29个新特性.Kubernetes 1.6重点关注集群规模扩展和自动化.目前最多支持5000个 ...

  7. python-文件基本操作(一) (转载)

    转载自: https://www.cnblogs.com/nizhihong/p/6528439.html 一.打开文件的方法: 注意:file()和open()基本相同,且最后要用close()关闭 ...

  8. http 的request和response 在servlet的应用文件下载

    一)response 我们通过浏览器访问网站的时候,处理响应的是response. 它由三部门组成:响应行.响应头.响应体 作用:往浏览器写东西. 1)响应行 格式:协议/版本  状态码 状态码说明. ...

  9. RS485接口为什么要接地

    RS485接口为什么要接地 RS485接口有三根线,分别是A.B和GND线.因为RS485是差分传输的,所以很多工程师以为GND地线不重要,经常不接,甚至有些工程为了节约成本用两芯线或者用视频线来传输 ...

  10. SpringCloud 学习(一) :Features

    话不多说,现在在开发微服务项目,也想系统的学习一下SpringCloud,顾选择硬着头皮跟着英文官方文档学习一遍SpringCloud. 现在公司在用SpringCloud,也有很好的实践应用,加上更 ...