Ajax原理: 通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM从而更新页面。

XMLHttpRequest: XMLHttpRequest是ajax核心机制,IE5中首先引入,是一种异步请求的技术,简单的来说,也就是javascript可以及时向服务器请求和处理响应,而不阻塞用户,达到无刷新的效果。

步骤:

1:创建XMLHttpRequest对象,也就是创建一个异步调用对象

2:建立连接

3:发送请求

4:设置函数监控状态,接收数据。

//ajax({

// url:'',//地址

// success:function(){},//成功的回调函数

// data:{},//传送的数据

// type:'',//请求类型

// error:function(){},//失败的回调函数

// time:3000//设置超时时间

//});

function ajax(json){

if(!json.url){

alert('请输入正确的url!')

return;

}

json.type=json.type || 'get';

json.data=json.data || {};

json.time=json.time || 3000;

var timer=null;

//创建ajax对象

if(window.XMLHttpRequest){

var oAjax=new XMLHttpRequest();

}else{

var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

}

switch (json.type.toLowerCase()){

case 'get':

oAjax.open('GET',json.url+'?'+json2Str(json.data),true);

oAjax.send();

break;

case 'post':

oAjax.open('POST',json.url,true);

//设置请求头

oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

oAjax.send(json2Str(json.data));

break;

}

//监控状态

oAjax.onreadystatechange=function(){

if(oAjax.readyState==4){

if(oAjax.status>=200&&oAjax.status<300 || oAjax.status==304){

json.success && json.sunccess(oAjax.responseText);

}else{

json.error && json.error(oAjax.status);

}

clearTimeout(timer);

}

};

timer=setTimeout(function(){

alert('请求超时!');

oAjax.onreadystatechange=null;

},json.time);

};

function json2Str(json){

json.t=Math.random();

var arr=[];

for (var name in json) {

arr.push(name+'='+json[name]);

}

return arr.join('&');

}

ajax常用的属性和方法:

属性

readyState

status

responseText

onreadystatechange

方法

open

send

setRequestHeader

abort 放弃

常见的状态码:

200 一切正常(ok)

304 没有被修改(not modified)

404 没找到页面(not found)

403 禁止访问(forbidden)

500 内部服务器出错(internal service error)

readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

0 代表未初始化。 还没有调用 open 方法

1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用

2 代表已加载完毕。send 已被调用。请求已经开始

3 代表交互中。服务器正在发送响应

4 代表完成。响应发送完毕

同步和异步的区别

同步 一次只干一件事

异步 一次干多件事

get 和 post

get 32k 不安全 易于分享 数据 通过url传输

post 1G 相对安全 不易于分享 不通过url传输

ajax概述原理,ajax基本原理及步骤相关推荐

  1. ajax概述原理,ajax基本原理

    C++模拟C#事件委托机制(一) 原文来自于http://www.cnblogs.com/netssfy/articles/1652671.html 写了一段时间的C#代码后确实发现C#的事件委托非常 ...

  2. ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数

    ajax通讯原理 要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...

  3. php ajax工作原理,AJAX实现页面无刷新操作原理解析

    摘要:ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.它是一种在 ...

  4. 【前端大杂烩】什么是ajax?ajax的原理?ajax怎么用?

    [前端大杂烩]✨✨一文带你走进ajax的世界✨✨ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 没有谁的生活会一直完美,但无论什么时候,都要一直看着前方,满怀希望就会所向披靡. ...

  5. 【面试题】Ajax的原理和优缺点总结

    [面试题]Ajax的原理和优缺点总结 Ajax的原理 Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作dom从而 ...

  6. ajax技术原理 F7300178 qrx

    ajax技术原理              AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式 ...

  7. AJAX工作原理及其优缺点

    1.什么是AJAX? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. ...

  8. Ajax的原理及优缺点

    定义 Ajax全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的技术.Ajax是一种在无需重新 ...

  9. ajax排行页面,ajax简单页面

    简单的注册页面运用ajax 主页面 无标题文档 //首先引用jquery文件 登录页面 用户名: 密码: $("#btn").click(function(){ //1.取内容 v ...

最新文章

  1. 商务智能 “软肋”何在?
  2. python读取txt数据-python读取文本文件数据
  3. Ubuntu中清理Network下Connect to Server的入口
  4. SPC.NET,为5年的开发做个结尾
  5. java contions_Java数据结构与算法
  6. 数组反向遍历ios_iOS中数组遍历的方法及比较
  7. 同步异步网络搜集到的比喻
  8. sso和oauth2.0的简单了解学习
  9. TeamViewer密码存储
  10. 一个页面是否应该全部组件化
  11. java 新区 老区_优学院《土地资源学》答案在线查题2020高校邦《Java核心开发技术【实境编程】》章测试答案...
  12. 第23天:js-数据类型转换
  13. 深圳蛇口人民医院办理健康证,免费体检,2017年后国家承担体检费用
  14. C++中的getline函数
  15. Linux系统管理技术(3)
  16. #define与const定义常量的区别
  17. 软件测试该怎么自学?
  18. 技术债务-坏味道、Bug、漏洞
  19. 最新文本转语音的接口(免费),百度语音作废
  20. eNSP网络构建—配置无线网络

热门文章

  1. 为什么一个字节表示2个16进制位?
  2. 光流定点若干问题分析
  3. js原生实现jquery方法offset()和position()
  4. 关于热力图的一些细节汇总以及热力图参数详解
  5. 前端学习记录13-CSS-(滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素)
  6. python 将三维数据转为二维_Python二维数组与三维数组切片详解
  7. linux 喂狗时间,狗狗最佳喂食时间大揭秘!主人你知道嘛?
  8. 活动回顾丨ALC Beijing 首场 Meetup:《开源到底有多难?》
  9. Osx10.14升级watchman踩坑记
  10. (附源码)springboot服装购物网站 毕业设计 010234