ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等)。

ajax优点:

1) 页面无刷新的动态数据交互

2) 局部刷新页面

3) 界面的美观

4) 对数据库的操作

ajax使用

第一步:创建ajax引擎(获取XMLHttpRequest对象)

不同浏览器内核,获取XMLHttpRequest对象方法不一样。所以在创建ajax引擎之前需要先判断浏览器内核。

主流浏览器内核有:IE浏览器,火狐浏览器(Firefox)

创建方法一:

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);
//第一个适用于火狐内核(Firefox),第二个适用于IE

创建方法二:

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");
}

第二步:通过创建的XMLHttpRequest对象准备发送请求到指定服务器页面

if(xmlhttp){ //检测XMLHttpRequest对象是否创建成功(若对象为null对象返回false)
xmlhttp.open("get/post","URL",true/false);
//调用XMLHttpRequest对象的open方法准备向服务器发送请求
//参数一:请求的方式;(string)
//参数二:发送ajax请求的URL;(string)
//参数三:是否使用异步机制处理;(bool)
//回调函数得知数据是否返回完成(数据是否全部获取)
xmlhttp.onreadystatechange = function(){
//实时监测数据交互状态(状态改变的事件触发器)
//该事件在数据交互时会被反复调用
//调用过程中会实时返回当前执行的状态
if(xmlhttp.readyState == 4){
//通过readyState属性获取当前状态
//若当前状态为4则表示数据全部返回
if(xmlhttp.status == 200){ //通过status属性获取http返回的状态码(200表示成功)
//第四步:开始处理返回的数据(结果)
//根据具体需求进行处理
//通过responseText属性获取返回报文
}
}
}

第三步:向服务器发送请求

xmlhttp.send();      //调用XMLHttpRequest对象的send()方法发送请求
//send()方法的参数也可以用了传递数据(post请求下)

最后附上一个完整版 :

function ajax(method, URLdata, dispose) {
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open(method, URLdata, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200 || xmlhttp.status == 300) {
dispose(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

扩展——ajax处理Json格式数据

使用JSON.parse()方法将Json字符串转换为JS对象。

var Json = JSON.parse(json字符串);

var r = JSON.parse(xmlhttp.responseText);
alert(r[0].Name);

转换为js对象的json可以直接点出对象的属性;如果是集合,使用下标取对象。

ajax学习笔记(原生js的ajax)的更多相关文章

  1. Ajax学习笔记2之使用Ajax和XML

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...

  2. Ajax学习笔记之一----------第一个Ajax Demo[转载]

    原文地址: http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html 一.核心推动力:XMLHttpRequest对象XMLHttpR ...

  3. AJAX学习笔记——jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...

  4. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  5. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  6. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  7. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

随机推荐

  1. HDU 2767:Proving Equivalences(强连通)

    http://acm.hdu.edu.cn/showproblem.php?pid=2767 题意:给出n个点m条边,问在m条边的基础上,最小再添加多少条边可以让图变成强连通.思路:强连通分量缩点后找 ...

  2. HDU 5876:Sparse Graph(BFS)

    http://acm.hdu.edu.cn/showproblem.php?pid=5876 Sparse Graph Problem Description   In graph theory, t ...

  3. C#:Winform技巧

    1.如何设置winform窗体透明,但是显示的内容不透明? 方法:BackColor设置:Red(任意)在窗体属性里设置一个“TransparenceKey”的属性为Red 2.如何让C#编译不安全代 ...

  4. [转]UIApplicationDelegate分析小结

    转载地址:http://www.apkbus.com/android-131646-1-1.html 我们开发出来的运行在iOS平台上的应用程序都有一个UIApplication类的对象.1.是iOS ...

  5. NYOJ(21),BFS,三个水杯

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=21 BFS判环,vis标记状态即可. #include <stdio.h> # ...

  6. malloc与kmalloc

    在设备驱动程序中动态开辟内存,不是用malloc,而是kmalloc,或者用get_free_pages直接申请页.释放内存用的是kfree,或free_pages. 对于提供了MMU(存储管理器,辅 ...

  7. 用C#钩子写一个改键外挂

    我的微信群——软件开发测试工程师交流群,欢迎扫码: 改键是一种习惯,比如在玩儿lol或者dota的时候.理论上玩儿什么游戏都可以改键. 做一个窗体(点击Install——应用改键,点击Uninstal ...

  8. 非在线方式搭建Android开发环境

    android 环境搭建 http://jingyan.baidu.com/article/90895e0fba1b5664ed6b0b7e.html android开发环境的搭建(解决sdk下载更新 ...

  9. UVA 10341 Solve It 二分

    题目大意:给6个系数,问是否存在X使得等式成立 思路:二分.... #include <stdio.h> #include <math.h> #define EEE 2.718 ...

  10. Linux 性能监测:Network

    网络的监测是所有 Linux 子系统里面最复杂的,有太多的因素在里面,比如:延迟.阻塞.冲突.丢包等,更糟的是与 Linux 主机相连的路由器.交换机.无线信号都会影响到整体网络并且很难判断是因为 L ...