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

一、Ajax初始

1、什么是Ajax？

异步的JavaScript和xml

2、xml是什么？

一种标记语言，传输和存储数据----------现在用JSON传输数据

3、Ajax的作用

局部加载
可以使网页异步更新

4、Ajax的原理或者步骤(6步)

创建Ajax对象

js 复制代码

if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest()
    console.log(xhr, typeof xhr, xhr instanceof Object);
} else {
//iE6以下
    var xhr = new ActiveXObject()
}

设置请求的方式、地址、是否异步

js 复制代码

xhr.open('get', './数据', true)

向后端发起请求

js 复制代码

xhr.send()

后端接收数据

js 复制代码

xhr.onreadystatechange = function () {
  console.log(xhr)
}

后端进行数据判断

js 复制代码

  if(xhr.readyState == 4 && xhr.status == 200) {
    console.log("请求成功！")
}

将成功后的数据返回给前端，并进行渲染

js 复制代码

document.getElementByTagName('h1')[0].innerText = xhr.responseText

5、地址栏传参实例

地址栏传参query： url?参数=+具体的值

js 复制代码

//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对象

js 复制代码

json字符串转json对象：JSON.parse(json对象)

js 复制代码

var obj = JSON.parse(xhr.response)

字符串转json对象：JSON.parse(json对象)

application/x-www-form-urlencoded 表单的格式
application/json json的格式 (默认的)

js 复制代码

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

html 复制代码

<body>
  <h1>在输入框中尝试输入字母 a:</h1>
  <form action="">
    <label for="">请输入：</label>
    <input type="text" id="valueText" />
  </form>
  <p>
    <span>提示信息：</span>
    <b id="result"></b>
  </p>
</body>

js 复制代码

$('#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:状态

html 复制代码

<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>

js 复制代码

<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方法请求数据

js 复制代码

$.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请求的区别？

六、随机颜色

js 复制代码

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