原理及概念

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。

动态网页:是指可以通过服务器语言结合数据库随时修改数据的网页。

静态网页,随着html代码的生成,页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

Ajax的优势

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

AJAX 可使因特网应用程序更小、更快,更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX 基于下列 Web 标准:

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。

不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。

通过 AJAX,因特网应用程序可以变得更完善,更友好。

Ajax的异步

异步:是相对于同步而言的,我们学过的定时器也是异步的一种,也就是其他程序不需要等待定时器的代码全部执行完毕以后才能执行代码。因为定时器有可能是无限循环执行代码的,如果等待定时器执行完毕那么其他的代码将永远无法运行。所以异步编程就是相对于其他代码是独立完成的。也就是上面所说的ajax是独立于浏览器平台的。

Tip:事件也是异步执行的,事件是发生某件事情后才会执行代码的。
同步:我们之前所写的代码除了定时器和事件大部分都是同步执行的。也就是同一个代码块中都是从上到下执行的。

Ajax的工作原理

Ajax 核心对象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通过该实例化的对象向服务器
发出请求,等待服务器响应
服务器响应完成后客户端再处理
服务器端响应的数据。
Ajax请求服务器的过程中有5个状态
0:表示请求服务器之前
1:表示打开远程服务器链接对应open方法
2:表示向服务器发送数据对应send方法
3:表示服务器响应过程中并未结束
4:表示服务器响应完成

/**
* 创建XMLHttpRequest对象
* @param _method 请求方式: post||get
* @param _url 远程服务器地址
* @param _async 是否异步
* @param _parameter 向服务器发送数据
* @param _callBack 回调函数
*/
function parameterDeal(_parameter){
var _sender="";
if(_parameter instanceof Object){
for(var k in _parameter){
_sender+=k+"="+_parameter[k]+"&";
}
return _sender.replace(/\&$/g,"");
}else{
return _parameter;
}
}
function createXMLHttpRequest(){
try{
return new window.XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("MSXML2.XMLHTTP.6.0");
}catch(e){
try{
return new ActiveXObject("MSXML2.XMLHTTP.3.0");
}catch(e){
try{
return new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
throw new Error("该浏览器版本太低,已经被大部分市场淘汰,请升级!!!");
return;
}
}
}
}
}
}
function ajaxRequest(_method,_url,_async,_parameter,_callBack){
var _ajax=createXMLHttpRequest();
if(_ajax){
_ajax.onreadystatechange=function(){
if(_ajax.readyState==4 && _ajax.status==200){
_callBack(_ajax.responseText);
}
}
_ajax.open(_method,_url,_async);
_ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");
_ajax.send(parameterDeal(_parameter));
}
}

这是封装好了的原生Ajax,在使用的过程中,只需要新建一个js文件,将这段代码放进去,什么都不要改,在HTML页面引入之后,调用 ajaxRequest()函数,传入你想要的参数,就可以正常使用了。

此方法纯属个人封装,有更精简方法的朋友欢迎与我分享!!!!

js原生Ajax 的封装和原理的更多相关文章

  1. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  2. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  5. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  6. js原生Ajax(十四)

    一.XMLHttpRequest    [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...

  7. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  8. js原生函数一些封装

    这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...

  9. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

随机推荐

  1. jQuery原型技术分解

    jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...

  2. spring mvc controller中获取request head内容

    spring mvc controller中获取request head内容: @RequestMapping("/{mlid}/{ptn}/{name}") public Str ...

  3. 细说WPF数据绑定

    简单的事例:   <Slider Name="mySlider" Height="28" HorizontalAlignment="Left&q ...

  4. HDU4734(数位dp)

    F(x) Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. Oracle BEQ方式连接配置

    Oracle BEQ方式连接配置 服务端和客户端在同一台机器上,可以使用BEQ连接,BEQ连接可以理解为进程间直接通信,不需要走网络监听,性能更高. 可以参考MOS:How To Connect Us ...

  6. java系列笔记---正则表达式(2)

    正则表达式 说真的正则表达式真不好写,当我收集资料准备开始写的时候,发现收集的东西越来越多范围也越来越广,我文章的前提就是文章要清晰, 在缕清自己思路之后,我从先简后难的方式来写有关正表达式,你们如果 ...

  7. 初识 BFC、 IFC、GFC、FFC

    首先本文中介绍的 BFC. IFC.GFC.FFC 均为 CSS 中常见问题的解读,如没兴趣,可以绕道了. 然后在介绍这么多的 *FC 之前,我们得了解 一下 Box 和 Formatting Con ...

  8. 矢量切片(Vector tile)番外一:Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  9. c#访问数据库的两种方法以及事务的两种方法

    //2015/07/03 using System; using System.Collections.Generic; using System.Linq; using System.Text; u ...

  10. 【前端】:Dom

    前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...