ajax是什么?ajax交互模型?

AJAX的全称是Asynchronous JavaScript and XML(异步加载  JavaScript 和 XML)。

  ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

  ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。

以下是:对ajax的封装

function myajax(type,url,params,dataType,isAsync,callback) {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//兼容IE 6
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
if (type == ‘get‘) {//get method 不一定跟随参数
if (params) {
url += ‘?‘ + params;
}
xhr.open(type, url, isAsync);
xhr.send(null);
} else if (type == ‘post‘) {
xhr.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
xhr.open(type, url, isAsync);
xhr.send(params);
}
if (isAsync) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// if(xhr.responseXML){
// var result=xhr.responseXML;
// }else if(xhr.responseText){
// var result=xhr.responseText;
// }
var result = null;
if (dataType == ‘json‘) {
// var result=xhr.responseText;
// result=JSON.parse(result);
var result = JSON.parse(xhr.responseText);
} else if (dataType == ‘xml‘) {
var result = xhr.responseXML;
} else {
var result = xhr.responseText;
}
callback && callback(result);
}
}
} else {
if (xhr.readyState == 4 && xhr.status == 200) {
// if(xhr.responseXML){
// var result=xhr.responseXML;
// }else if(xhr.responseText){
// var result=xhr.responseText;
// }
var result = null;
if (dataType == ‘json‘) {
// var result=xhr.responseText;
// result=JSON.parse(result);
var result = JSON.parse(xhr.responseText);
} else if (dataType == ‘xml‘) {
var result = xhr.responseXML;
} else {
var result = xhr.responseText;
}
callback && callback(result);
}
}

}

// 二次封装 参数变成对象
function myAjax2(option){
var defaults={ //定义了默认值 用obj调用的值覆盖
type:‘get‘,
url:‘#‘,
dataType:‘json‘,
data:{}, //参数 因为参数不一定是一对 所以要初始化时候用空对象
async:true,
success:function(result){
console.log(result);
}

}

for(var key in option){ //覆盖上面的额
defaults[key]=option[key];
}

var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
var params=‘‘;
for(var attr in defaults.data){
params+=attr+‘=‘+defaults.data[attr]+‘&‘;
}
if(params){
params=params.substring(0,params.length-1);
}

if(defaults.type=="get"){
defaults.url+=‘?‘+params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type=="get"){
xhr.send(null)
}else if(defaults.type==‘post‘){
xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
xhr.send(params);
}
if(defaults.async){
xhr.onreadystatechange=function (){
if(xhr.readyState==4&&xhr.status==200){
if(defaults.dataType==‘json‘){
var result=JSON.parse(xhr.responseText);
}else if(defaults.dataType==‘xml‘){
var result=xhr.responseXML;
}else {
var result=xhr.responseText;
}
defaults.success(result);
}
}
}else {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = null;
if(defaults.dataType == "json") {
result = xhr.responseText;
result = JSON.parse(result);
} else if(defaults.dataType == "xml") {
result = xhr.responseXML;
} else {
result = xhr.responseText;
}
defaults.success(result);

}
}
}

}

//jquery 中 对ajax 封装(最常用)
// $.ajax({
// url:url,
// type:type,
// data:{
// uname:username
// },
// async:true,
// dataType:‘json‘,
// success:function (result){
// // ......
// }
// })

// $.get() $.post()
// var params=.....

// $.get(url+‘?‘+params,function(result){
// // 。。。。。
// })
// $.post(url,{xx:xx},function(){

// })

ajax交互模型:如下

原文地址:https://www.cnblogs.com/ccnNL/p/8541120.html

时间: 03-07

ajax是什么?ajax交互模型?的相关文章

Ajax的基本请求/响应模型

一.Ajax工作核心 Ajax的核心是JavaScript对象XMLHttpRequest(简称XHR).它是一种支持异步请求的技术.可以通过使用XHR对象向服务器提出请求并处理响应,而不阻塞用户. Ajax可以完成的功能有: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 1.1 Ajax简介 Ajax可以说 是目前最流行的 WEB 技术,它采用客户端脚本与 Web 服务器交换数据,也就是说,客户端的表单请求不是直接给

3、在Ajax于Java的交互过程中,加入加载图片

1.在Ajax于Java的交互过程中,加入加载图片 1.1 html代码 <body> <button id="mybtn">点击</button> <div id="myAjax"> <img src="./img/load2.jpg" id="myimg"> </div> <!-- 模拟等待的图片 --> </body> 1.2

AJAX与spring mvc交互

(1)简单交互: <table style="width: 100%" class="table" cellspacing="1" cellpadding="1" border="0">   <tr><td  class="ti1"  colSpan="2">请选择审讯室</td></tr>   <tr

aJax学习之Ajax工作原理

转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项目经理找到了我,并且征询我培训的主题,考虑到之前Javascript.CSS等WEB开发技术都已经讲解过了,所以决定针对AJAX这一块做一个比较系统

前后端交互模型(一个面试题引发的思考总结)

客户端和服务端的交互 面试题: 当用户在地址栏中输入网址,到最后看到页面,中间都经历了什么? (引出前后端交互模型的内容) 客户端 =======> 服务端 (request请求阶段) 服务端 <======= 客户端 (responese响应阶段) 1.URL地址解析 2.DNS域名解析(DNS服务器) 3.和服务器建立TCP连接 (三次握手) 4.把客户端信息传递给服务器(发送HTTP请求) 5.服务器得到并处理请求(HTTP响应内容) 6.客户端渲染服务器返回的内容 7.和服务器端断开T

Ajax系列之一:ajax旧貌换新颜

什么是ajax? 什么是Ajax?Ajax就是Asynchronous +JavaScript+XML,中文翻译为:异步的javascript与XML,它是利用javascript语言和xml数据实现客户端与服务器进行异步通信的一种方法.Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术. Ajax(AsynchronousJavaScriptandXML)是结合了Java技术(.net).XML以及JavaScript等编程技术,可以让开发人员

Ajax、反向Ajax和WebSocket 概念

Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML,Ajax),一种可通过JavaScript来访问的浏览器功能特性,其允许脚本向幕后的网站发送一个HTTP请求而又无需重新加载页面.Ajax的出现已经超过了十年,尽管其名字中包含了XML,但你几乎可以在Ajax请求中传送任何的东西,最常用的数据是JSON,其与JavaScript语法很接近,且消耗更少带宽.清单1给出了这样的一个例子,Ajax请求通过某个地方的邮政编码来检索该地的名称. 清

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha