一、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;
}
