1、Ajax、get、post、ajax,随机颜色

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