AJAX一直以来没怎么接触,主要是做JSON数据在服务器和客户端之间传递的时候,被玩坏了,对它莫名的不可爱,最近心理阴影小了,于是又来看看它.......

  AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

  以上是百度到的。。。

  下面自己找着教程归纳了一些。

  Asynchronous 异步通信。实现局部刷新。比如说表单注册,如果传统的页面中,如果整体传送,浪费资源。而现在的方式则是部分发送,而且可以后台发送。这就是异步的特点。而不是单一的流水线过程。提高用户体验,节约网页流量。数据一般用JSON。

  一般涉及到javascript,JSON,DOM操作。

  下面通过一个搜索框提示功能演示实例来体现AJAX的原理。

  典型的AJAX编程模板:1.创建XMLHttpReqeust对象  2.open操作初始化请求信息 3.监听处理相应结果 4.send操作发出请求。

  1.创建XMLHttpReqeust对象 :var xhr=new XMLHttpRequest();要注意浏览器的状态码:4,200,404等记得是什么意思。

  大部分浏览器都有这个函数,但是ie6浏览器低版本没有内置XMLHttpRequest(),但是ie6有一个ActiveXObject。这时候比较兼容性的创建XMLHttpRequest对象的方法如下:

//1.创建XMLHttpReqeust对象
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xhr=new ActiveXObject('Msxml2.XMLHTTP');
}catch (e){
try{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}catch (e){}
}
}

  2.AJAX请求的发起

  重点有两个方法要掌握:open和send。open是初始化,而send是真正发起请求的方法。

  xhr.open('GET','http://test/keyword/hit?keyword=c',true);

  第一个参数是确认当前请求的提交方式,第二个参数是确定当前请求的目标,即url,第三个参数是确定请求时同步(false)还是异步(true),第四和第五一般不用,是帐户名和密码。

  open执行之后,就可以执行send方法了。如果open方法用的是GET方法,请求内容放到了url中,这时候send方法就不用传递参数,直接send();如果是post方法,则send方法加如参数,如xhr.send('keyword=c&other=');这是编码的方式urlencoded。当然还可以用JSON数据处理的方式,send一个字符串的形式。即:

  xhr.setRequestHeader("Content-Type","application/json");//给当前的请求设置json标志。

  xhr.send(JSON.stringify({keyword:'c',other:'test'}));JSON对象序列化格式化成JSON格式数据。不支持JSON的浏览器,有一库json2.js实现兼容。

  setRequestHeader除了Content-Type方法外,还可以加自定义的头。

  3.AJAX响应的接收和处理

  onreadystatechange接收时要先通知服务器可以接了。onreadystate的值,包括5种状态:

  0:未初始化;1:连接建立,请求发出;2:服务器返回响应;3:交互(处理相应数据);4:完成,数据可交付客户端使用。同时还要知道HTTP status的状态码:200,403,404,500..

  xhr.onreadystatechange=function(e){

  if(xhr.readyState===4&&xhr.status==200){}}

  数据准备就绪后,怎么处理?

  responseText:JSON.parse(xhr.responseText);字符串变为对象。

  还可以从响应结果中获取:getResponseHeader,getAllResponseHeader,status,statusTe。

  在浏览器F12中的Network中数据包中查看具体的数据。

总结:

XMLHttpReqeust API
AJAX编程模板

jQuery中的ajax。

    $.ajax({
url:'',
datatype:'',
success:function(data){ },
error:function(){ }
});

  

  

AJAX编程模板的更多相关文章

  1. http服务&ajax编程

    http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...

  2. 01HTTP服务&AJAX编程

    HTTP服务&AJAX编程 一.服务器         1. 什么是服务器? 能够提供某种服务的机器(计算机)称为服务器. 2.服务器的分类:              1.按系统分类:Lin ...

  3. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

  4. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  5. 【WCF--初入江湖】12 WCF与Ajax编程

    12 WCF与Ajax编程 Ajax Ajax基本原理 AJAX技术的本质原理就是:使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信. 通过这个对象,JavaS ...

  6. ajax编程**

    ajax 编程 *step1获得 XmlHttpRequest 对象.该对象由浏览器提供,但是该类型并没有标准化.ie 和其它浏览器不同,其它浏览器都支持该类型,而 ie 不支持. function ...

  7. C++编程模板2

    C++编程模板2 #include <iostream> using namespace std; /* */ int main(){ int ans; printf("%d\n ...

  8. Ajax编程(HTTP请求与响应及API)详解

    AJAX编程 即 Asynchronous [e'sɪŋkrənəs] Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用. 本质是在HTTP协议的基础上以 ...

  9. AutoCAD二次开发(2020版)--4,使用ARX向导创建编程模板(框架)--

    手动创建ObjectARX应用程序非常麻烦,在此步骤中,将介绍ObjectARX向导. 在这里,我们将使用ObjectARX向导创建我们的ObjectARX应用程序. 本节的程序的需求是,接收CAD用 ...

随机推荐

  1. leetcode https://oj.leetcode.com/problems/jump-game-ii/

    1.超时的,效率太低 public class Solution { public int jump(int[] A) { int len=A.length; int d[]=new int[len] ...

  2. UIAlertView的使用

    UIAlertView是用于弹出一个对话框进行选择或者消息提示 构造函数:     UIAlertView * alert = [[UIAlertViewalloc] initWithTitle:@& ...

  3. ubuntu14.04安装百度云Bcloud

    git地址:https://github.com/LiuLang/bcloud-packages sudo apt-get install python3-setuptools md5sum bclo ...

  4. codeforces 337D Book of Evil (树形dp)

    题目链接:http://codeforces.com/problemset/problem/337/D 参考博客:http://www.cnblogs.com/chanme/p/3265913 题目大 ...

  5. Download SymmetricDS Data Sync Software for Free

    Download SymmetricDS Data Sync Software for Free Download SymmetricDS

  6. 10 个用于收集硬件信息的 Linux 命令

    知道自己的Linux系统运行在什么样的硬件组件上总是好的,因为如果涉及到在系统上安装软件包和驱动程序的话,这将有助于你处理兼容性问题. 因此,下面我们将给出一些非常有用的命令,它们可以帮助你提取你的L ...

  7. Google的一些功能和软件

    本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1.  iGoogle 2.  Google Earth 3.  Google Talk http://www.goo ...

  8. 5 kafka整合storm

    本博文的主要内容有 .kafka整合storm   .storm-kafka工程  .storm + kafka的具体应用场景有哪些? 要想kafka整合storm,则必须要把这个storm-kafk ...

  9. Telephone directory - SGU 127(水)

    题目大意:有一个电话簿,每页最多纪录K行电话,现在有N个电话要记录在电话薄上,要求同页的电话号码的首位要相同,电话簿的前两页是纪录的别的东西,问最少需要多少页电话簿. 分析:直接求首位数字有多少个即可 ...

  10. 使用Spring-data-redis操作Redis的Sentinel

    介绍 Spring-Data-Redis项目(简称SDR) 是对Redis的Key-Value数据存储操作提供了更高层次的抽象,提供了一个对几种主要的redis的Java客户端(例 如:jedis,j ...