Ajax 异步与服务端交换数据

Ajax异步与同步有什么不同？

首先我们来思考一个问题

什么是同步？

传统提交表单的方式都是同步提交的，表单必须要有name属性，发生页面跳转

<body>
		<div class="container">
			<form method="post" action="api/form.php">
				<div class="form-group">
					<input type="text" class="form-control" name="username" />
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="password" />
				</div>
				<button class="btn btn-danger">提交</button>
			</form>
		</div>
	</body>

同步提交表单会发生地址栏的变化（post）

如图：

同步提交表单（get）

如图：

代码如下：

<body>
		<div class="container">
			<form method="get" action="api/form.php">
				<div class="form-group">
					<input type="text" class="form-control" name="username" />
				</div>
				<div class="form-group">
					<input type="text" class="form-control" name="password" />
				</div>
				<button class="btn btn-danger">提交</button>
			</form>
		</div>
	</body>

先写一个php的包，然后导入

<?php
//	$username = $_POST["username"];
//	$password = $_POST["password"];
//	echo $username.$password;
	
	$username = $_GET["username"];
	$password = $_GET["password"];
	echo $username.$password;
?>

接下来开始编写Ajax:

1.实例化ajax对象

//1.编写ajax对象
var xhr = new XMLHttpRequest

2.打开浏览器链接

xhr.open("POST"，"api/form.php",true)

3.向服务器发送数据

xhr.send()

4.等待服务器返回数据

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText)
    }
}

编写post异步提交表单

var oBtn = document.getElementById("btn")
oBtn.onclick = function(){
	    var oUsername = document.getElementById("username").value
      //var oPassword = document.getElementById("password").value

		//1.编写ajax对象
		var xhr = new XMLHttpRequest()

		//2.打开服务器链接
		xhr.open("POST","api/form.php",true)

		//3.发送数据到服务器
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
		xhr.send("username="+oUsername+"&password="+oPassword+"")

		//4.等待服务器返回数据
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
					console.log(xhr.responseText)

				}
			}
    	}

Post提交表单数据形式

打开控制台再点击Network就能看到以下情况

编写get异步提交表单

var oBtn = document.getElementById("btn")
oBtn.onclick = function(){
		var oUsername = document.getElementById("username").value
		var oPassword = document.getElementById("password").value
							//1.编写ajax对象
		var xhr = new XMLHttpRequest()
		//2.打开服务器链接
		xhr.open("get","api/form.php?username="+oUsername+"&password="+oPassword+"",true)
		//3.发送数据到服务器
		xhr.send()
		//4.等待服务器返回数据
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
					console.log(xhr.responseText)
			}
		}
	}

封装ajax（）方法

1.反序列化data数据

var data = {
    uesername:"a",
    password:"c"
}
//username=a&password=c
fro(var i in data){
    console.log(i+":"+data[i])
}

2.利用arr.join()方法,拼接data数据

var data = {
    username:"a",
    password:"c"
}
//username=a&password=c
var arr = []
    for(var i in data){
        arr.push(i+"="+data[i])
}
var newArr = arr.join("&")
console.lo0g(newArr)

3.封装转换getdata方法

var data ={
     username:"a",
     password:"c"
}
function getData(data){
    var arr = []
    for (var i in data){
        arr.pish(i+"="+data[i])
    }
    return arr.join("&")
}
console.log(getData(data))

完善post请求的ajax方法

function ajax(options){
    //console.log(options)
       var data = getData(options.data)
        var xhr = new XMLHttpRequest
    //console.log(data)
if(options.type=="post"){
    xhr.open(options.type,options.url,true)
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(data)
    xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			options.success(xhr.responseText)
				}
			}
		}
    }

完善get请求的ajax方法

}else if(options.type=="get"){
    xhr.open(options.type,opTions.url+"?"+data)			
	xhr.send()
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			options.success(xhr.responseText)
		}
	}
}

前台调用Ajax（）方法

var oBtn = document.getElementById("btn")

var urlLink = function(){
			
		var oUsername = document.getElementById("username").value
		var oPassword = document.getElementById("password").value

        ajax({
            url:urlLink,
            type:"get",
            data:{
                username:oUsername,
                password:oPassword
            },
                success:function(res){
                    console.log(res)
        }
})

完整代码如下：

var oBtn = document.getElementById("btn")
			
	var urlLink = "api/form.php"
	oBtn.onclick = function(){
	var oUsername = document.getElementById("username").value
	var oPassword = document.getElementById("password").value
				
			ajax({
				url:urlLink,
				type:"get",
				data:{
					username:oUsername,
					password:oPassword
				},
				success:function(res){
				console.log(res)
			}
		})
				
				
				
	}
			//1.编写ajax对象
//		var xhr = new XMLHttpRequest()
		function ajax(options){
//		console.log(options)
		var data = getData(options.data)
		var xhr = new XMLHttpRequest
//		console.log(data)
			if(options.type=="post"){
				xhr.open(options.type,options.url,true)
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
				xhr.send(data)
				xhr.onreadystatechange = function(){
		    		if(xhr.readyState == 4 && xhr.status == 200){
						options.success(xhr.responseText)
							}
						}
						
				}else if(options.type=="get"){
				xhr.open(options.type,options.url+"?"+data)
				xhr.send()
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						options.success(xhr.responseText)
				}
			}
		}
					
					
	}
		function getData(data){
			var arr = []
			for (var i in data) {
				arr.push(i+"="+data[i])
		}
			return arr.join("&")
		}
//		console.log(getData(data))