JavaScript封装Ajax（类JQuery中$.ajax()方法）

ajax.js

(<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(exports, document, undefined){
<span class="hljs-pi">    "use strict";
    <span class="hljs-function"><span class="hljs-keyword">function <span class="hljs-title">Ajax<span class="hljs-params">(){
        <span class="hljs-keyword">if(!(<span class="hljs-keyword">this <span class="hljs-keyword">instanceof Ajax)) <span class="hljs-keyword">return;
        <span class="hljs-keyword">return <span class="hljs-keyword">this;
    }
    Ajax.prototype = {
        init: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(opts){
            opts = opts || {};
            <span class="hljs-keyword">this.opts = opts;
            <span class="hljs-keyword">this.opts.type = opts.type || <span class="hljs-string">'get';
            <span class="hljs-keyword">this.opts.url = opts.url || <span class="hljs-string">'';
            <span class="hljs-keyword">this.opts.data = opts.data || <span class="hljs-string">'';
            <span class="hljs-keyword">this.opts.dataType = opts.dataType || <span class="hljs-string">'text';
            <span class="hljs-keyword">this.opts.async = opts.async || <span class="hljs-literal">true;
            <span class="hljs-keyword">this.opts.success = opts.success || <span class="hljs-literal">null;
            <span class="hljs-keyword">this.opts.error = opts.error || <span class="hljs-literal">null;
            <span class="hljs-keyword">this.xhr = <span class="hljs-keyword">this.createXMLHttpRequest.call(<span class="hljs-keyword">this);
            <span class="hljs-keyword">this.initEvent.call(<span class="hljs-keyword">this);
            <span class="hljs-keyword">return <span class="hljs-keyword">this;
        },
        ajax: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(opts){
            <span class="hljs-keyword">this.init.apply(<span class="hljs-keyword">this, <span class="hljs-built_in">arguments);
            <span class="hljs-keyword">this.open.call(<span class="hljs-keyword">this);
            <span class="hljs-keyword">this.send.call(<span class="hljs-keyword">this);
        },
        createXMLHttpRequest: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
            <span class="hljs-keyword">var xhr;
            <span class="hljs-keyword">try{
                xhr = <span class="hljs-keyword">new XMLHttpRequest();
            }<span class="hljs-keyword">catch(e){
                console.log(e);
            }
            <span class="hljs-keyword">return xhr;
        },
        initEvent: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
            <span class="hljs-keyword">var _this = <span class="hljs-keyword">this;
            <span class="hljs-keyword">this.xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
                <span class="hljs-keyword">if(_this.xhr.readyState == <span class="hljs-number">4 && _this.xhr.status == <span class="hljs-number">200){
                    <span class="hljs-keyword">if(_this.xhr.status == <span class="hljs-number">200){
                        <span class="hljs-keyword">if(_this.opts.dataType === <span class="hljs-string">'text' || _this.opts.dataType === <span class="hljs-string">'TEXT'){
                            _this.opts.success && _this.opts.success(_this.xhr.responseText, <span class="hljs-string">'success', _this.xhr);
                        }<span class="hljs-keyword">else <span class="hljs-keyword">if(_this.opts.dataType === <span class="hljs-string">'xml' || _this.opts.dataType === <span class="hljs-string">'XML'){
                            _this.opts.success && _this.opts.success(_this.xhr.responseXML, <span class="hljs-string">'success', _this.xhr);
                        }<span class="hljs-keyword">else <span class="hljs-keyword">if(_this.opts.dataType === <span class="hljs-string">'json' || _this.opts.dataType === <span class="hljs-string">'JSON'){
                            _this.opts.success && _this.opts.success(<span class="hljs-built_in">JSON.parse(_this.xhr.responseText), <span class="hljs-string">'success', _this.xhr);
                        }
                    }<span class="hljs-keyword">else <span class="hljs-keyword">if(_this.xhr.status != <span class="hljs-number">200){
                        _this.opts.error && _this.opts.error(_this.xhr, <span class="hljs-string">'error');
                    }
                }
            }
        },
        open: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
            <span class="hljs-keyword">if(<span class="hljs-keyword">this.opts.type === <span class="hljs-string">'GET' || <span class="hljs-keyword">this.opts.type === <span class="hljs-string">'get'){
                <span class="hljs-keyword">var str = (<span class="hljs-keyword">typeof <span class="hljs-keyword">this.opts.data === <span class="hljs-string">'string') && <span class="hljs-keyword">this.opts.data || <span class="hljs-keyword">this.objectToString.call(<span class="hljs-keyword">this, <span class="hljs-keyword">this.opts.data),
                    url = (str === <span class="hljs-string">'') && <span class="hljs-keyword">this.opts.url || (<span class="hljs-keyword">this.opts.url.split(<span class="hljs-string">'?')[<span class="hljs-number">0] + <span class="hljs-string">'?' + str);
                <span class="hljs-keyword">this.xhr.open(<span class="hljs-keyword">this.opts.type, url, <span class="hljs-keyword">this.opts.async);
            }<span class="hljs-keyword">else <span class="hljs-keyword">if(<span class="hljs-keyword">this.opts.type === <span class="hljs-string">'POST' || <span class="hljs-keyword">this.opts.type === <span class="hljs-string">'post'){
                <span class="hljs-keyword">this.xhr.open(<span class="hljs-keyword">this.opts.type, <span class="hljs-keyword">this.opts.url.split(<span class="hljs-string">'?')[<span class="hljs-number">0], <span class="hljs-keyword">this.opts.async);
            }
            <span class="hljs-keyword">return <span class="hljs-keyword">this;
        },
        send: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
            <span class="hljs-keyword">if(<span class="hljs-keyword">this.opts.type === <span class="hljs-string">'GET' || <span class="hljs-keyword">this.opts.type === <span class="hljs-string">'get'){
                <span class="hljs-keyword">this.xhr.send();
            }<span class="hljs-keyword">else <span class="hljs-keyword">if(<span class="hljs-keyword">this.opts.type === <span class="hljs-string">'POST' || <span class="hljs-keyword">this.opts.type === <span class="hljs-string">'post'){
                <span class="hljs-keyword">var str = (<span class="hljs-keyword">typeof <span class="hljs-keyword">this.opts.data === <span class="hljs-string">'string') && <span class="hljs-keyword">this.opts.data || <span class="hljs-keyword">this.objectToString.call(<span class="hljs-keyword">this, <span class="hljs-keyword">this.opts.data);
                <span class="hljs-keyword">this.xhr.setRequestHeader(<span class="hljs-string">'content-type', <span class="hljs-string">'application/x-www-form-urlencoded');
                <span class="hljs-keyword">this.xhr.send(str);
            }
        },
        objectToString: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(data){
            <span class="hljs-keyword">if(<span class="hljs-keyword">typeof data !== <span class="hljs-string">'object') <span class="hljs-keyword">return data;
            <span class="hljs-keyword">var str = <span class="hljs-string">'';
            <span class="hljs-keyword">for(<span class="hljs-keyword">var prop <span class="hljs-keyword">in data){
                str += <span class="hljs-string">'&' + prop + <span class="hljs-string">'=' + data[prop];
            }
            <span class="hljs-keyword">return str.slice(<span class="hljs-number">1);
        }
    }
    exports.Ajax = Ajax;
})(window, document);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

ajax.php

<span class="php"><span class="hljs-preprocessor"><?php

<span class="hljs-variable">$c = <span class="hljs-variable">$_REQUEST[<span class="hljs-string">'c'];
<span class="hljs-variable">$arr = <span class="hljs-keyword">array(
    <span class="hljs-string">'a'=><span class="hljs-number">2014,
    <span class="hljs-string">'b'=><span class="hljs-keyword">array(<span class="hljs-string">'c'=><span class="hljs-variable">$c)
);
<span class="hljs-keyword">echo json_encode(<span class="hljs-variable">$arr);</span></span></span></span></span></span></span></span></span></span></span></span></span></span>

index.html

<span class="hljs-doctype"><!DOCTYPE html>
<span class="hljs-tag"><<span class="hljs-title">html <span class="hljs-attribute">lang=<span class="hljs-value">"en">
<span class="hljs-tag"><<span class="hljs-title">head>
    <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
    <span class="hljs-tag"><<span class="hljs-title">title>ajax<span class="hljs-tag">title>
<span class="hljs-tag">head>
<span class="hljs-tag"><<span class="hljs-title">body>
    <span class="hljs-tag"><<span class="hljs-title">script <span class="hljs-attribute">src=<span class="hljs-value">"ajax.js"><span class="javascript"><span class="hljs-tag">script>
    <span class="hljs-tag"><<span class="hljs-title">script><span class="javascript">
        <span class="hljs-keyword">new Ajax().ajax({
            type: <span class="hljs-string">'get',
            url: <span class="hljs-string">'ajax.php?c=123',      </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Original: https://www.cnblogs.com/xiaochao12345/p/4664416.html
Author: super1234
Title: JavaScript封装Ajax（类JQuery中$.ajax()方法）