1、get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="sendMsg()">发送请求</button>
<div></div>
<script>
function sendMsg()
{
//1.创建一个XMLHTTPRequesrt对象
var xhr = new XMLHttpRequest();
//2.调用open方法打开连接
//open方法有三个:请求的method,请求的url,是否异步(默认异步true)
xhr.open('get','./data.php?id=1')
//3.发送请求
xhr.send()
//4.监听状态的改变
xhr.onreadystatechange = function()
{
//判断状态值,0~4这5种状态,4代表完成
if(xhr.readyState == 4)
{
//判断状态码
if(xhr.status == 200)
{
var resp = JSON.parse(xhr.responseText)
console.log(resp)
document.querySelector('div').innerHTML = `
<h2>编号:${resp.id}</h2>
<h2>标题:${resp.title}</h2>
`
}
}
}
}
</script>
</body>
</html>
<?php
$id = $_GET['id'];
//echo 'hello ajax';
echo json_encode(array('id'=>$id,'title'=>'hello'));
?>
2、post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="sendMsg()">发送请求</button>
<div></div>
<script>
function sendMsg()
{
var xhr = new XMLHttpRequest();
//这里method传post
xhr.open('post','./datapost.php')
//设置请求头的content-type
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=18')
xhr.onreadystatechange = function()
{
if(xhr.readyState === 4)
{
if(xhr.status === 200)
{
var resp = JSON.parse(xhr.responseText)
console.log(resp)
document.querySelector('div').innerHTML = `
<h2>姓名:${resp.name}</h2>
<h2>年龄:${resp.age}</h2>
<h2>money:${resp.money}</h2>
`
}
}
}
}
</script>
</body>
</html>
<?php
$name = $_POST['name'];
$age = $_POST['age'];
// echo 'hello ajax';
echo json_encode(array(
"name" => $name,
"age" => $age,
"money" => 9999999
));
?>
3、合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
<script src="./util.js"></script>
<title>Document</title>
</head>
<body>
<button onclick="sendMsg()">发送请求</button>
<script>
function sendMsg()
{
// util.get('./data3.php',{id:3,title:'lisi'},function(resp){console.log(resp)},true)
// util.post('./data32.php',{id:3,title:'lisi'},function(resp){console.log(resp)},true)
util.ajax({
method:'get',
url:'./data3.php',
query:{id:3,title:'wangwu'},
callback:function(resp){console.log(resp)},
isJson:true
})
}
</script>
</body>
</html>
ajax
var util = {
get: function (url, query, callback, isJson) {
//如果有参数,先把参数凭借再url后面
if (query) {
url += '?'
for (var key in query) {
url += `${key}=${query[key]}&`
}
//去除多余得&符号
url = url.slice(0, -1)
}
var xhr = new XMLHttpRequest
xhr.open('get', url)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
callback(res)
}
}
}
},
post: function (url, query, callback, isJson) {
//如果有参数,把参数拼接起来
var str = ''
if (query) {
for (var key in query) {
str += `${key}=${query[key]}&`
}
//去除多余得&符号
str = str.slice(0, -1)
}
var xhr = new XMLHttpRequest
xhr.open('post', url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(str)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
callback(res)
}
}
}
},
// params:object :{method,url,query,calllback,isJson}
ajax: function (params) {
var xhr = new XMLHttpRequest()
if (params.method.toLowerCase() === 'get') {
if (params.query) {
params.url += '?'
for (var key in params.query) {
params.url += `${key}=${params.query[key]}&`
}
params.url = params.url.slice(0, -1)
}
xhr.open('get', params.url)
xhr.send()
} else {
//post
var str = ''
if (params.query) {
for (var key in params.query) {
str += `${key}=${params.query[key]}&`
}
str = str.slice(0, -1)
}
xhr.open('post', params.url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(str)
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var resp = params.isJson ? JSON.parse(xhr.responseText) : xhr.responseText
params.callback(resp)
}
}
}
}
}