来自 澳门金莎娱乐手机版 2019-11-21 05:05 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

实现原生ajax的几种方法,学习Jquery里ajax如何原生

ajax原生态的写法现在己经很少见了,大家都是直接使用jquery的ajax,因为jquery提供了大量的ajax方法,使用简单方便快捷了,下面我还是给各位提供一些ajax原生态写法。

初学js,好奇jquery里ajax的实现就看了几篇博文,自己动手设计一个面向对象的原生态版本的ajax,以供学习之用,不足之处忘大家批评指正!

自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法。

一、首先是jquery里ajax的用法

 实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:

1、$.get

 

$.get()方法使用GET方式来进行异步请求,它的语法结构为:

 代码如下

$.get( url [, data] [, callback] )

复制代码

解释一下这个函数的各个参数:

var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
    xmlHttp=new XMLHttpRequest();

url:string类型,ajax请求的地址。

 

data:可选参数,object类型,发送至服务器的key/value数据会作为QueryString附加到请求URL中。

(1)下面使用上面创建的xmlHttp实现最简单的ajax get请求:

callback:可选参数,function类型,当ajax返回成功时自动调用该函数。

 

2、$.post()

 代码如下

$.post()方法使用POST方式来进行异步请求,它的语法结构为:

复制代码

$.post(url,[data],[callback],[type])

function doGet(url){
    // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码
    createxmlHttpRequest();
    xmlHttp.open("GET",url);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange = function() {
        if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
            alert('success');
        } else {
            alert('fail');
        }
    }

这个方法和$.get()用法差不多,唯独多了一个type参数,那么这里就只介绍type参数吧,其他的参考上面$.get()的。

(2)使用上面创建的xmlHttp实现最简单的ajax post请求:

type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式一样,都是字符串的。

 

具体可参见博文 提供)

 代码如下

 

复制代码

自己面向对象法封装的Ajax.js,可以引用到页面中调用,代码如下:

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:实现原生ajax的几种方法,学习Jquery里ajax如何原生

关键词: