包头建网站公司哪家强,销售类网站数据库的建设,网站首页的导航栏,关键词优化提升排名一、Ajax初始 1、什么是Ajax#xff1f; 异步的JavaScript和xml 2、xml是什么#xff1f; 一种标记语言#xff0c;传输和存储数据----------现在用JSON传输数据 3、Ajax的作用 局部加载 可以使网页异步更新 4、Ajax的原理或者步骤(6步) 创建Ajax对象 if (window.X…一、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.responseText5、地址栏传参实例 地址栏传参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 /pp obj.password /p}} }二、$.get方法请求数据 一般的get请求都是地址栏传参$.get(url,function(data,stutas){}) 只能运用get请求data:返回的数据stutas:状态 成功success 失败error bodyh1在输入框中尝试输入字母 a:/h1form actionlabel for请输入/labelinput typetext idvalueText //formpspan提示信息/spanb idresult/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:状态 bodyform action methodgetdivlabel for姓名/labelinput typetext iduser //divdivlabel for密码/labelinput typepassword idpwd //div/formbutton登录2343434344/buttondiv idresult/div /bodyscript$(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 /pp 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; }