AJAX的一个简单实例，跨域的解决，使用JQuery来进行ajax的调用

Posted 2021-04-08 学长冷月

1.什么是AJAX

ajax（Asynchronous javascript And XML），中文名为异步的js和xml。可以在不刷新网页的情况下与后台服务器进行通讯，加强用户的体验感。是目前广泛使用的前端技术，下面将用原生js和JQuery来介绍一个简单的ajax实例。

2.一个简单的AJAX实例

get请求

// 采用原生的js代码（get请求）
//1.实例化XMLHttpRequest对象
var request = new XMLHttpRequest();
//2.调用open方法，第一个参数为请求方式（get、post），第二个参数为请求地址，第三个参数为异步或者同步
 request.open("GET", "请求url"，true);
 //3.发送请求
 request.send();
 //4.监听服务器响应数据
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服务器响应的数据
                }else {
                    alert("错误");
                }
            }
        }

post请求,注意post请求必须添加响应头

// 采用原生的js代码（post请求）
//1.实例化XMLHttpRequest对象
var request = new XMLHttpRequest();
//2.调用open方法，第一个参数为请求方式（get、post），第二个参数为请求地址，第三个参数为异步或者同步
 request.open("POST", "请求url"，true);
 //3.准备数据
 var data = ['key' = 'value'];
 //4.设置响应头,注意post请求必须添加响应头
 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 //5.发送请求
 request.send(data);
 //6.监听服务器响应数据
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服务器响应的数据
                }else {
                    alert("错误");
                }
            }
        }

3.采用JQuery内置的方法来调用ajax

get请求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq库
$.ajax({
	type: "GET",	
	url: "请求url",
	dataType: "json",
	success: function(data) {
		//请求成功后回调函数
	},
	error: function(jqXHR){
		//请求失败后回调函数
	},
});

post请求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq库
$.ajax({
	type: "POST",	
	url: "请求url",
	data:{
		key:value
	},
	dataType: "json",
	success: function(data) {
		//请求成功后回调函数
	},
	error: function(jqXHR){
		//请求失败后回调函数
	},
});

4.解决跨域问题

http://www.abc.com:8080/index.php

协议.二级域名.域名:端口号/目标脚本文件

跨域是用ajax异步请求时经常遇到的问题,只要协议、域名、端口号其中一个不同，就产生了跨域访问，解决的方法很简单，建议利用XHR2方法，在后台进行操作从而实现跨域支持IE9以上在服务器设置以下2个请求头就可以解决：

header('Access-Control-Allow-Origin:*'); //*为支持所有地址跨域，可以改为只允许特定地地址跨域
header('Access-Control-Allow-Methods:POST,GET');//POST、GET为允许的请求方式