title: Ajax学习
notebook: 编程
tags:javascript
只会iOS已经不行了，要学习各种知识。
首先自己搭建一个模拟环境，使用Xampp即可
请求纯文本数据
- 主要是简单使用，网络请求的流程，首先配置参数，其次设置回调方法，最后发起请求。
- 使用 XMLHttpRequest
- 比如说open方法，
open(type,url/file,async)
function loadText() {
// console.log("hello world");
var xml = new XMLHttpRequest();
// console.log(xml)
// open(type,url/file,async)
// 配置请求数据
xml.open('GET', 'sample.txt', true);
// 接受请求
// onload /onreadstatechange
xml.onload = function() {
console.log(this.responseText);
}
// xml.onreadystatechange = function() {
// console.log("readyState:"+this.readyState);
// console.log(this.responseText);
// }
// 发送请求
xml.send();
}
-
onload和onreadstatechange的使用以及区别
// readyState 状态码
// 0 请求初始化
// 1 服务端连接已建立
// 2 请求已接收
// 3 请求处理中
// 4 请求已完成，且相应已就绪
// HTTP 状态码
// 200 服务器成功返回网页
// 404 请求的网页不存在
// 503 服务器暂时不可用
function loadText() {
// console.log("hello world");
var xml = new XMLHttpRequest();
// console.log(xml)
// open(type,url/file,async)
// 配置请求数据
xml.open('GET', 'sample1.txt', true);
console.log("readyState:" + xml.readyState);
// 接受请求
// onload /onreadstatechange
xml.onload = function() {
console.log("readyState:" + this.readyState);
// console.log(this.responseText);
}
// 如果使用onload 但是想监听3，可以使用这个方法
xml.onprogress = function() {
console.log("11111readyState:" + this.readyState);
}
// xml.onreadystatechange = function() {
// console.log("readyState:"+this.readyState);
// if(this.status == 200 && this.readyState == 4) {
// console.log(this.responseText);
// }else if(this.status == 404) {
// console.log('网页不存在');
// }
// }
// onload 经过 1 4
// onreadystatechange 经过1 2 3 4
// 发送请求
xml.send();
}
请求json数据
- 请求单个json数据
// 请求单个json数据
function clickuser() {
var xml = new XMLHttpRequest();
xml.open("GET", 'user.json', true);
xml.onreadystatechange = function() {
if (this.status == 200 && this.readyState == 4) {
console.log(this.responseText);
// json 格式数据需要进行转换才能使用
var user = JSON.parse(this.responseText);
console.log(user.name);
// ES6语法
// var output = `
// <ul>
// <li>${user.id}</li>
// <li>${user.name}</li>
// <li>${user.email}</li>
// </ul>
// `;
// js普通语法
var output =
'<ul>' +
'<li>' + user.id + '</li>'+
'<li>' + user.name + '</li>'+
'<li>' + user.email + '</li>' +
'</ul>';
document.getElementById("user").innerHTML = output;
}
}
xml.send();
}
- 请求json数组数据
// 请求多个json数据
function clickusers() {
var xml = new XMLHttpRequest();
xml.open("GET", 'users.json', true);
xml.onreadystatechange = function() {
if (this.status == 200 && this.readyState == 4) {
console.log(this.responseText);
var users = JSON.parse(this.responseText);
var output
// ES6语法
for (var i = 0; i < users.length - 1; i++) {
output += `
<ul>
<li>${users[i].id}</li>
<li>${users[i].name}</li>
<li>${users[i].email}</li>
</ul>
`;
}
document.getElementById("users").innerHTML = output;
}
}
xml.send();
}
- 请求Github接口
//请求Github接口
function clickButton() {
var xml = new XMLHttpRequest();
xml.open("get", "https://api.github.com/users", true);
xml.onreadystatechange = function() {
if (this.status == 200 && this.readyState == 4) {
var users = JSON.parse(this.responseText);
// console.log(users);
var output = '';
for (var i = 0; i < users.length; i++) {
output += `
<ul>
<li>id:${users[i].id}</li>
<li>login:${users[i].login}</li>
</ul>
`;
}
document.getElementById("users").innerHTML = output;
}
}
xml.send();
}
- 请求php接口
- 注意post请求要设置文件头并且传递参数
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
<body>
<button id="button">请求php接口</button>
<div></div>
<div id="users"></div>
<p>get提交表单到PHP</p>
<form action="procress.php" method="GET">
<input type="text" name="name">
<input type="submit" name="提交">
</form>
<p>get提交表单到AJAX</p>
<form id="getForm">
<input type="text" name="name" id='name'>
<input type="submit" name="提交">
</form>
<br>
<p>post提交表单到PHP</p>
<form action="procress.php" method="post">
<input type="text" name="name">
<input type="submit" name="提交">
</form>
<p>post提交表单到AJAX</p>
<form id="postForm">
<input type="text" name="name" id='name2'>
<input type="submit" name="提交">
</form>
<script type="text/javascript">
document.getElementById("button").addEventListener("click", clickButton);
document.getElementById("getForm").addEventListener("submit", getForm);
document.getElementById("postForm").addEventListener("submit", postForm);
// get ajax可以不刷新界面获得数据
function getForm(e) {
e.preventDefault();
var name = document.getElementById("name").value;
var req = new XMLHttpRequest();
req.open("GET", "procress.php?name=" + name, true);
req.onload = function() {
console.log(this.responseText);
}
req.send();
}
// post ajax可以不刷新界面获得数据
function postForm(e) {
e.preventDefault();
var name = document.getElementById("name2").value;
var req = new XMLHttpRequest();
var para = "name=" + name;
req.open("post", "procress.php", true);
// post需要设置文件头
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
req.onload = function() {
console.log(this.responseText);
}
req.send(para); // 传递参数
}
//请求php接口
function clickButton() {
var xml = new XMLHttpRequest();
xml.open("get", "procress.php?name=xiaozhang", true);
xml.onload = function() {
console.log(this.responseText)
// if (this.status == 200 && this.readyState == 4) {
// var users = JSON.parse(this.responseText);
// // console.log(users);
// var output = '';
// for (var i = 0; i < users.length; i++) {
// output += `
// <ul>
// <li>id:${users[i].id}</li>
// <li>login:${users[i].login}</li>
// </ul>
// `;
// }
// document.getElementById("users").innerHTML = output;
// }
}
xml.send();
}
</script>
</body>
PHP和AJAX接口请求区别.gif
- 配置mysql,使用PHP访问数据库
- 注意phpmyadmin的配置，需要相应的新建一个
ajaxtest的数据库，并添加一个表users
<?php
#echo "hello php";
if (isset($_GET['name'])) {// 相应get接口
echo "GET:你的名字是".$_GET['name'];
}
// 链接数据库
$conn = mysqli_connect('localhost','root','','ajaxtest');
if (isset($_POST['name'])) {// 相应post接口
// echo "post:你的名字是".$_POST['name'];
// 将拿来的数据转换一下
$name = mysqli_real_escape_string($conn,$_POST['name']);
$query = "insert into users(name) values('$name')";
if(mysqli_query($conn,$query)) {
echo "添加数据库成功";
}else {
echo "添加数据库失败";
}
}
?>
- post 参数配置
- post和get都需要格式化参数
//格式化参数，post和get都需要格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
return arr.join("&");
}
function postInfo() {
// var name = document.getElementById("name2").value;
var req = new XMLHttpRequest();
var para = { "userId": "1", "userPsw": "2", "content": '{"buscode":"MM_0000001","functype":"query","apptype":"3","pagesize":"20","curpage":"1","params":{"param1":"","param2":"440905500000","param3":"05002"}}'};
req.open("post", "https://14.215.237.205:6082/frame/commonCollect.do?method=comBusQyery", true);
// post需要设置文件头，这里一定要写成"application/x-www-form-urlencoded"，不然服务端拿不到参数
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
console.log('post:' + formatParams(para));
req.onreadystatechange = function() {
console.log(req.readyState);
if (req.readyState == 4 && req.status == 200) {
console.log(req.responseText);
}
};
req.send(formatParams(para)); // 传递参数
}
总结
- 总的来说,ajax的使用也不是很麻烦，熟悉了几个方法，就可以了。
网友评论