菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

Ajax 简单案例

原创
05/13 14:22
阅读数 174

Ajax 发送 GET

	// 1、创建对象
	var xhr = new XMLHttpRequest();
	
	// 2、初始化 设置 请求方法 url 是否异步(true为异步)
	xhr.open('GET', 'http://127.0.0.1:8888/ajax', true);
	
	// 3、发送
	xhr.send();
	
	/* 4、回调(处理服务端返回的数据)
		readyState:
		0: 请求未初始化
		1: 服务器连接已建立
		2: 请求已接收
		3: 请求处理中
		4: 请求已完成,且响应已就绪
	*/
	xhr.onreadystatechange = function() {
		// 判断 readyState
		if(xhr.readyState == 4) {
		// 判断响应状态码
		if(xhr.status >= 200 && xhr.status < 300) {
			// 处理响应数据
			console.log(xhr.status); //状态码
			console.log(xhr.statusText); //状态字符串
			console.log(xhr.getAllResponseHeaders()); //所有响应头
			console.log(xhr.response); //响应体
		}
		}
	};
	</script>

Ajax 发送 POST

	// 1、创建对象
        var xhr = new XMLHttpRequest();

        // 2、初始化 设置 请求方法 url 是否异步(true为异步)
        xhr.open('POST', 'http://127.0.0.1:8888/ajax', true);

        // 如果想要使用post提交数据,必须添加此行 (设置请求头)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        /**
         * 3、发送 (在这里设置请求体)
         */
        xhr.send('age=18');

        /* 4、回调(处理服务端返回的数据)
            readyState:
                0: 请求未初始化
                1: 服务器连接已建立
                2: 请求已接收
                3: 请求处理中
                4: 请求已完成,且响应已就绪
        */
        xhr.onreadystatechange = function() {
            // 判断 readyState
            if(xhr.readyState == 4) {
                // 判断响应状态码
                if(xhr.status >= 200 && xhr.status < 300) {
                    // 处理响应数据
			...
                }
            }
        };

Jquery + Ajax

        /**
         * ajax 发送 Get 请求
         * 语法:$.get(URL,callback);
         *      URL 请求的 URL
         *      callback 回调函数
         *          - data :响应数据
         *          - status :状态
         */
        $.get('http://127.0.0.1:8888/ajax',function (data, status) {
            ...
        });
        /**
         * ajax 发送 Post 请求
         * 语法:$.post(URL,data,callback);
         *      URL :请求的 URL
         *      data : 请求体
         *      callback : 回调函数
         *          - data :响应数据
         *          - status :状态
         */
        $.post(
            'http://127.0.0.1:8888/ajax',
            {
                name : "小明",
                age : 18
            },
            function (data, status) {
                alert(data.toString());
                alert(status);
            }
        );
        // 通用方式
        $.ajax({
            // 请求 URL
            url : 'http://127.0.0.1:8888/ajax',
            // 请求类型
            type : 'POST',
            // 请求参数
            data : {
                name : "小明",
                age : 18
            },
            // 是否异步
            async : true,
            // 成功后回调函数
            success : function (data) {
                ...
            },
            // 失败回调
            error : function () {
            	...
            }
        })

发表评论

0/200
0 点赞
0 评论
收藏