ajax概述原理,ajax基本原理及步骤
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基本原理及步骤相关推荐
- ajax概述原理,ajax基本原理
C++模拟C#事件委托机制(一) 原文来自于http://www.cnblogs.com/netssfy/articles/1652671.html 写了一段时间的C#代码后确实发现C#的事件委托非常 ...
- ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理 要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...
- php ajax工作原理,AJAX实现页面无刷新操作原理解析
摘要:ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.它是一种在 ...
- 【前端大杂烩】什么是ajax?ajax的原理?ajax怎么用?
[前端大杂烩]✨✨一文带你走进ajax的世界✨✨ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 没有谁的生活会一直完美,但无论什么时候,都要一直看着前方,满怀希望就会所向披靡. ...
- 【面试题】Ajax的原理和优缺点总结
[面试题]Ajax的原理和优缺点总结 Ajax的原理 Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作dom从而 ...
- ajax技术原理 F7300178 qrx
ajax技术原理 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式 ...
- AJAX工作原理及其优缺点
1.什么是AJAX? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. ...
- Ajax的原理及优缺点
定义 Ajax全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的技术.Ajax是一种在无需重新 ...
- ajax排行页面,ajax简单页面
简单的注册页面运用ajax 主页面 无标题文档 //首先引用jquery文件 登录页面 用户名: 密码: $("#btn").click(function(){ //1.取内容 v ...
最新文章
- 商务智能 “软肋”何在?
- python读取txt数据-python读取文本文件数据
- Ubuntu中清理Network下Connect to Server的入口
- SPC.NET,为5年的开发做个结尾
- java contions_Java数据结构与算法
- 数组反向遍历ios_iOS中数组遍历的方法及比较
- 同步异步网络搜集到的比喻
- sso和oauth2.0的简单了解学习
- TeamViewer密码存储
- 一个页面是否应该全部组件化
- java 新区 老区_优学院《土地资源学》答案在线查题2020高校邦《Java核心开发技术【实境编程】》章测试答案...
- 第23天:js-数据类型转换
- 深圳蛇口人民医院办理健康证,免费体检,2017年后国家承担体检费用
- C++中的getline函数
- Linux系统管理技术(3)
- #define与const定义常量的区别
- 软件测试该怎么自学?
- 技术债务-坏味道、Bug、漏洞
- 最新文本转语音的接口(免费),百度语音作废
- eNSP网络构建—配置无线网络
热门文章
- 为什么一个字节表示2个16进制位?
- 光流定点若干问题分析
- js原生实现jquery方法offset()和position()
- 关于热力图的一些细节汇总以及热力图参数详解
- 前端学习记录13-CSS-(滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素)
- python 将三维数据转为二维_Python二维数组与三维数组切片详解
- linux 喂狗时间,狗狗最佳喂食时间大揭秘!主人你知道嘛?
- 活动回顾丨ALC Beijing 首场 Meetup:《开源到底有多难?》
- Osx10.14升级watchman踩坑记
- (附源码)springboot服装购物网站 毕业设计 010234