Ajax 简单案例

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 () {
                    	...
                    }
                })

更具体参数设置 ： 菜鸟教程