【浏览器】Ajax 是什么? Ajax的基本流程?

状态码表示服务器对客户端请求的各种不同的处理结果和状态 。
3. 前后端交互在动态网站中 , 许多功能是由前后端交互实现的 。例如 , 用户注册和登录、发表评论、查询积分、余额等 。这些操作可分为两类 , 一类是向服务器提交数据(表单交互) , 一类是向服务器查询数据( URL参数交互) 。前后端交互——表单交互
表单交互是指在HTML中创建一个表单 , 用户填写表单后提交给服务器 , 服务器收到表单后返回处理结果 。
前后端交互——URL参数交互
URL参数经常用于浏览器向服务器提交一些请求信息 。
三、什么是Ajax?
Ajax是一个异步请求数据的web开发技术 , 用于改善用户的体验和页面性能 。简单来说 , 是在不需要刷新页面的情况下 , Ajax通过余部请求加载后台数据 , 并在网页上呈现出来 。目的是提高用户体验 , 减少网络数据的传输量 。同时由于Ajax请求获取得是数据而不是HTML文档 , 因此也节省了网络宽带 , 让用户的网络体验也变得更加顺畅 。常用的运用场景是表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等…
四、Ajax的原理是什么?
在解释Ajax原理之前 , 我们不妨先举个“领导想找小李汇报一下工作”例子 , 领导想找小李问点事 , 就委托秘书去叫小李 , 自己就接着做其他事情 , 直到秘书告诉他小李已经到了 , 最后小李跟领导汇报工作 。
Ajax请求数据流程与“领导想找小李汇报一下工作”类似 。其中最核心的依赖是浏览器提供的对象 , 它扮演的角色相当于秘书 , 使得浏览器可以发出HTTP请求与接收HTTP响应 。浏览器接着做其他事情 , 等收到XHR返回来的数据再渲染页面 。
理解了Ajax的工作原理后 , 接下来我们探讨下如何使用Ajax 。
五、Ajax的使用 1. 创建Ajax核心对象(记得考虑兼容性)
var xhr = null;if(window.XMLHttpRequest){//兼容 IE7+ , Firefox , chrome , opera , safarixhr = new XMLHttpRequest();}else{//兼容IE6 , IE5xhr = new ActiveXObiect("Microsoft.XMLHTTP");}
2. 向服务器发送请求
1.xhr.open(method,url,async);2.send(string); //post请求时才用字符串参数 , 否则不用带参数 。
xhr.open("POST","test.html",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("fname=Henry&lname=Ford"); //post请求参数放在send里面 , 即请求体
open(",url,async"):建立对服务器的调用;
send():向服务器发送请求 , 参数可以是null(get请求时)
("", "value"):设置HTTP请求的首部信息 , 可以向服务器传递参数 , 这个方法必须在open之后调用 。
3. 服务器响应处理(区分同步和异步两种情况)
同步时浏览器得一直等待服务器响应才能进行下一步;异步浏览器发出请求后继续做其他事情 。
1、同步处理
xhr.open("GET","info.txt",false);xhr.send();document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上
2、异步处理
相对来说比较复杂 , 要在请求状态改变事件中处理 。
xhr.onreadystatechange=function(){if(xhr.readyState==4 && xhr.status==200){document.getElementById("myDiv").innerHTML=xhr.responseText;//只刷新了id为myDiv的标签里面的内容 , 其他都没有变化}}