一、Ajax初始
1、什么是Ajax？
- 异步的JavaScript和xml
2、xml是什么？
- 一种标记语言，传输和存储数据----------现在用JSON传输数据
3、Ajax的作用
局部加载
可以使网页异步更新
4、Ajax的原理或者步骤(6步)
- 创建Ajax对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest()
console.log(xhr, typeof xhr, xhr instanceof Object);
} else {
//iE6以下
var xhr = new ActiveXObject()
}
- 设置请求的方式、地址、是否异步
xhr.open('get', './数据', true)
- 向后端发起请求
xhr.send()
- 后端接收数据
xhr.onreadystatechange = function () {
console.log(xhr)
}
- 后端进行数据判断
if(xhr.readyState == 4 && xhr.status == 200) {
console.log("请求成功！")
}
- 将成功后的数据返回给前端，并进行渲染
document.getElementByTagName('h1')[0].innerText = xhr.responseText
5、地址栏传参实例
地址栏传参query： url?参数=+具体的值
//1、创建Ajax对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest()
} else {
//iE6以下
var xhr = new ActiveXObject()
}
console.log(str)
// 2、设置请求的方式、地址、是否异步
/*-------------地址栏传参query： url?参数=+具体的值------------*/
xhr.open('get', './getHead.php?q=' + str, true)
// 3、向后端发起请求
xhr.send()
// 4、后端接收数据
xhr.onreadystatechange = function () {
// 5、后端进行数据判断
if (xhr.readyState == 4 && xhr.status == 200) {
// 6、将成功后的数据返回给前端，并进行渲染
console.log(xhr)
document.getElementById('result').innerHTML = xhr.response
}
}
6、请求体传参
请求体传参body：“参数=”+具体的值
JSON字符串转JSON对象
json字符串转json对象：JSON.parse(json对象)
var obj = JSON.parse(xhr.response)
字符串转json对象：JSON.parse(json对象)
- application/x-www-form-urlencoded 表单的格式
- application/json json的格式 (默认的)
var user = document.getElementById('user')
var pwd = document.getElementById('pwd')
function login() {
//1、创建Ajax对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest()
} else {
var xhr = ActiveXObject()
}
xhr.open('post', '../tt_post.php', true)
// 请求体传参在传递之前必须设置请求头，如果不设置就是默认的
// setRequestHeader('Content-Type', '类型的值')
/*
application/x-www-form-urlencoded 表单的格式
application/json json的格式 (默认的)
*/
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=' + user.value + '&password=' + pwd.value)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr)
console.log(xhr.response)
console.log(typeof xhr.response)
// JSON字符串转JSON对象
var obj = JSON.parse(xhr.response)
console.log(obj)
document.getElementById('result').innerHTML =
'<p>' + obj.username + '</p><p>' + obj.password + '</p>'
}
}
}
二、$.get方法请求数据
- 一般的get请求都是地址栏传参
- $.get(url,function(data,stutas){}) 只能运用get请求
- data:返回的数据
- stutas:状态 成功success 失败error
<body>
<h1>在输入框中尝试输入字母 a:</h1>
<form action="">
<label for="">请输入：</label>
<input type="text" id="valueText" />
</form>
<p>
<span>提示信息：</span>
<b id="result"></b>
</p>
</body>
$('#valueText').keyup(function () {
$.get('getHead.php?q=' + $(this).val(), function (data, stutas) {
// console.log(stutas)
if (stutas == 'success') {
// console.log(data)
$('#result').text(data)
}
})
})
三、$post方法请求数据
- $.post(url,params,function(data,stutas){}) 只能运用于post请求
- url:请求的地址
- params:请求的参数
- data:返回的数据
- stutas:状态
<body>
<form action="" method="get">
<div>
<label for="">姓名：</label>
<input type="text" id="user" />
</div>
<div>
<label for="">密码：</label>
<input type="password" id="pwd" />
</div>
</form>
<button>登录2343434344</button>
<div id="result"></div>
</body>
<script>
$('button').click(function () {
$.post(
'./tt_post.php',
'username=' + $('#user').val() + '&password=' + $('#pwd').val(),
function (data, stutas) {
if (stutas == 'success') {
$('#result').html('<p>' +JSON.parse(data).username +'</p><p>' +JSON.parse(data).password +'</p>'
)
}
}
)
})
</script>
四、$.ajax方法请求数据
$.ajax({
url: './tt_post.php', //请求的地址，
type: 'POST', //请求的方式
async: true, //是否异步
headers: {
'Content-type': 'application/x-www-form-urlencoded',
}, //请求头
data: {
username: $('#user').val(),//获取输入框的值
password: '1243',
}, //参数
success: function (res) {
console.log(res) //返回的数据
}, //成功后
error: function (err) {
console.log(err) //Ajax对象
}, //失败后
complete: function (data) {
console.log(data) //Ajax对象
}, //都会执行完成的方法
})
五、get请求和post请求的区别？
六、随机颜色
function changeColor() {
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var color = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
return color;
}
