1.写在前面:

  阅读要求:

    具有一定的HTML、CSS、JavaScript、Json基础


2.什么是ajax

  Ajax:即”Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。


3.为什么使用ajax

  在动态网页开发技术中,客户端(通常是浏览器)与服务端进行数据交互是十分频繁的,如何节省网络资源,提供良好的用户体验是十分关键的。Ajax采用异步请求方式,使得不用刷新整个页面就可以和后台实现数据交互,从而更新内容...


4.如何使用原生的ajax

  使用ajax技术的关键点落在了XMLHttpRequest(注:ie5、ie6使用ActiveXObject)对象上,因此利用好该对象是关键

  注意:

    

function loadData() {

  //创建XMLHttpRequest对象

  var xmlHttpRequestObj = {};

  //创建json对象,传送json格式数据到服务端

  Var jsonObj = {};

  if (window.XMLHttpRequest) {

  // IE7+, Firefox, Chrome, Opera, Safari

   xmlHttpRequestObj =new XMLHttpRequest();

  } else {

   // IE6, IE5

   xmlHttpRequestObj =new ActiveXObject("Microsoft.XMLHTTP");

  }

  //当请求状态改变时会调用xmlHttpRequestObj .onreadystatechange方法

    xmlHttpRequestObj .onreadystatechange = function() {

    if (xmlHttpRequestObj .readyState == 0 ) {

      Alert(“open()函数未执行”);

     } else if(xmlHttpRequestObj.readyState ==  1) {

        Alert(“open()函数已执行,send()函数未执行”);

     } else if(xmlHttpRequestObj.readyState == 2) {

        Alert(“send()函数已执行,头部和状态码可以获取”)

      } else if(xmlHttpRequestObj.readyState == 3) {

        Alert(“头部已收到,解析响应体”);

    } else if(xmlHttpRequestObj.readyState == 4) {

        Alert(“请求完成”);

        If (xmlHttpRequestObj.status == 200) {

          Alert(“响应就绪,反序列化json对象填充数据到页面”);

        } else if (xmlHttpRequestObj.status == 400) {

          Alert(“页面丢失”);

        } else {

          Alert(“服务异常”);

        }

    }

  }

  //method:请求方式:GET、POST、PUT、DELETE... Url:请求的地址 asnyc:是否采用异步

  xmlHttpRequestObj.open("method", "url", async);

  //设置请求头,POST请求格式需要载入,其他不需要

  xmlHttpRequestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");

  //请求数据,参数为jsonObj json对象

  xmlHttpRequestObj.send(jsonObj);

}


5.交流与讨论:

  如有纰漏,望斧正,转载请注明出处...

ajax请求技术的更多相关文章

  1. HTTP管线化技术--ajax请求

    1.管线化技术——客户端可以发送多次请求到服务端,而不需要等待上一次请求得到响应的时候才能进行下一次请求.实现并行发送请求 2.ajax——实现网页异步刷新 问题:当用户进行多次ajax请求的时候,并 ...

  2. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  3. ajax请求后台,返回json格式数据,模板!

    添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="te ...

  4. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  5. AJAX请求遭遇未登录和Session失效的解决方案

    使用技术:HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定.但是AJAX却是例外的,所以解决方法是设置响应为session失效. 一 ...

  6. 关于Ajax的技术组成与核心原理

    1.Ajax 特点: 局部刷新.提高用户的体验度,数据从服务器商加载 2.AJax的技术组成 不是新技术,而是之前技术的整合 Ajax: Asynchronous Javascript And Xml ...

  7. AJAX背景技术介绍

    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 主要包含了以下几种技术: Ajax(A ...

  8. 捣鼓一个Ajax请求管理器

    随着前端技术的不断发展,现在做的项目里很多页面里都会有大量的ajax请求,随之而来就有了一些问题: 1.没必要的ajax请求怎么处理? 2.ajax链式调用怎么维护? ajax链式调用最原始的写法: ...

  9. Ajax请求汇总(一)

    刚开始结束Ajax请求的时候,那真的是迷迷糊糊,昏天暗地,通过学习的深入和翻阅各种资料.求助度娘,总结一下Ajax请求,与大家分享一下,希望能给学习Ajax的同学一些帮助,废话不多手,直接开始~~~ ...

随机推荐

  1. 1Z0-053 争议题目解析520

    1Z0-053 争议题目解析520 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 520.Which of the following are not disabled by de ...

  2. dsoframer 使用笔记

    dsoframer是微软提供一款开源的用于在线编辑.调用Word.Excel.PowerPoint等的ActiveX控件. 1.层覆盖 如果需要在文档编辑区域上方覆盖一个div的话,z-index无效 ...

  3. .NET中使用NLog记录日志

    以前小编记录日志使用的是Log4Net,虽然好用但和NLog比起来稍显复杂.下面小编就和大伙分享一下NLog的使用方式. 引用NLog.Config 在使用NLog之前,我们要首先添加对NLog.Co ...

  4. CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

    前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发 ...

  5. 微服务(Microservices)——Martin Flower【翻译】

    原文是 Martin Flower 于 2014 年 3 月 25 日写的<Microservices>. 本文内容 微服务 微服务风格的特性 组件化(Componentization ) ...

  6. [WCF编程]12.事务:服务事务编程(上)

    一.设置环境事务 默认情况下,服务类和操作没有环境事务,即使客户端事务传播到服务端也是如此. 尽管强制事务流从客户端传播过来,但服务端的环境事务依旧为null.为了启用环境事务,每个操作必须告诉WCF ...

  7. 解决WebApi入参时多对象的问题

    我们的项目是用WebApi提供数据服务,且WebPage跟APP中都有调用到. WebApi提供的接口一多,就发现一个问题,我们项目中有很多接口是接收POST(安全原因,我们采用的是https)请求的 ...

  8. csharp: MySQL Stored Procedure using DAL

    # 建表 塗聚文 20160907 drop table attendrecord; create table attendrecord ( seq INT NOT NULL PRIMARY KEY ...

  9. 解决使用Skia图形库时遇到的几个问题

    Skia是一个开源的2D图形库,提供通用的API,适用于工作中遇到的各种硬件和软件平台.这是谷歌浏览器Chrome OS,Android的图形引擎,Mozilla Firefox浏览器和Firefox ...

  10. JAVAWEB贵美网上商城完整项目源码(SSH2)

    JAVAWEB贵美网上商城完整项目源码(SSH2) 贵美网上商城原是北大青鸟的一个内部项目,项目采用 struts2+spring4+hibernate4+MySQL等技术实现,数据库连接池采用c3p ...