网站建设与推广公司,吸引人的推广标题,建设京东类的网站需要什么流程图,微信安全中心官网一、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;
}
