ajax技术
问题:当用户在地址栏中输入一个网址(url),按下回车到底发生了什么?
笞:当用户在地址栏中输入一个网址按下回车,客户端会向服务器端发起一次上行请求,服务器端接收到请求以后,会响应的做出响应。经过浏览器渲染用户就可以看见了
注意﹔客户端可以问服务器端发起上行请求,常见上行请求有GET、POST上行请求。(起始一共有20多种上行请求)
百度百科解释:
ajax是指一种创建交互式网页应用的网页开发技术。
ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。
总结:ajax是一门前端技术(不是语言),客户端可以‘悄悄的’向服务器端发起上行请求,服务器端可以‘悄悄的’做出相应的下行响应,在页面没有重新加载情况下可以实现页面局部更新。
实例:163邮箱的注册业务,就是使用了ajax技术
ajax技术基本使用
概述:ajax用户可以向服务器端悄悄的发起上行请求,服务器端悄悄地做出相应的下行响应。在页面没有重新加载情况下实现页面局部更新。
注意:前端中ajax技术实现其实是由内置构造函数XMLHttpRequest构造函数实现的。但是在工作中一般都是JQ,因为JQ将原生ajax技术进行封装。
JQ中ajax技术--------GET
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Ajax</title>
6 <!-- 使用JQ -->
7 <script src="./js/jquery-2.1.4.min.js"></script>
8 </head>
9 <body>
10 <h1 class="nav">Ajax</h1>
11 <button id=btn0>点击我(GET)</button>
12 <button id=btn1>点击我(POST)</button>
13 </body>
14 </html>
15
16 <script type="text/javascript">
17 //给按钮绑定单击事件
18 $("#btn0").click(function(){
19 // alert(111);
20 //向服务器发起上行请求----GET,拉取服务器数据
21 //第一个参数向服务器端请求path
22 //第二个参数是客户端向服务器端额外传递一些数据(可有可无)
23 //第三个参数,当服务器响应数据成功的时候会立即执行一次
24 $.get(
25 "./data.txt",
26 function(data){
27 // alert("服务器响应成功");
28 //修改h1
29 $(".nav").html(data);
30 });
31 });
32
JQ当中ajax技术------post
1 //第二个按钮发起post请求
2 $("#btn1").click(function(){
3 // alert(111);
4 //向服务器发起上行请求----POST,拉取服务器数据
5 $.post( "./data.txt", function(data){
6 //alert("服务器响应成功2");
7 //在页面没有重新加载情况下实现页面局部更新
8 $(".nav").html(data);
9 });
10 });
JQ当中ajax技术------GET、POST
1 //第三个按钮
2 $("#btn2").click(function(){
3 //向服务器端发起POST请求
4 //当前这个方法可以发起GET、POST,请求参数配置务必是一个JSON数据格式
5 $.ajax({
6 //请求网址
7 "url":"./data.txt",
8 //请求方式
9 "type":"post",
10 //给服务器传递参数
11 "data":{
12 "a":10
13 },
//返回数据类型
dataType:"json",
14 //回调函数:可以接收服务器数据
15 "success":function(data){
16 //当服务器响应的时候会立即执行一次
17 $(".nav").html(data);
18 },"error":function(){
19 alert("服务器出小差了!!");
20 }
21 });
22 });
原生ajax技术
概述:ajax技术原生写法在工作当中不怎么常用,但是面试的时候(前端人)有时候会被问到
1 function createXMLHTTPRequest() {
2 //1.创建XMLHttpRequest对象
3 //这是XMLHttpReuquest对象无部使用中最复杂的一步
4 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
5 var xmlHttpRequest;
6 if (window.XMLHttpRequest) {
7 //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
8 xmlHttpRequest = new XMLHttpRequest();
9 //针对某些特定版本的mozillar浏览器的BUG进行修正
10 if (xmlHttpRequest.overrideMimeType) {
11 xmlHttpRequest.overrideMimeType("text/xml");
12 }
13 } else if (window.ActiveXObject) {
14 //针对IE6,IE5.5,IE5
15 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
16 //排在前面的版本较新
17 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
18 for ( var i = 0; i < activexName.length; i++) {
19 try {
20 //取出一个控件名进行创建,如果创建成功就终止循环
21 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
22 xmlHttpRequest = new ActiveXObject(activexName[i]);
23 if(xmlHttpRequest){
24 break;
25 }
26 } catch (e) {
27 }
28 }
29 }
30 return xmlHttpRequest;
31 }
View Code
Get请求代码
1 function get(){
2 var req = createXMLHTTPRequest();
3 if(req){
4 req.open("GET", "http://test.com/?keywords=手机", true);
5 req.onreadystatechange = function(){
6 if(req.readyState == 4){
7 if(req.status == 200){
8 alert("success");
9 }else{
10 alert("error");
11 }
12 }
13 }
14 req.send(null);
15 }
16 }
View Code
[
POST代码
1 function post(){
2 var req = createXMLHTTPRequest();
3 if(req){
4 req.open("POST", "http://test.com/", true);
5 req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");
6 req.send("keywords=手机");
7 req.onreadystatechange = function(){
8 if(req.readyState == 4){
9 if(req.status == 200){
10 alert("success");
11 }else{
12 alert("error");
13 }
14 }
15 }
16 }
17 }
View Code
get和post
相同点:get、post都属于上行请求
不同点:
get | post |
相对而言不安全 | 相对而言安全一些 |
给服务器额外传递数据是有上限的 | 相对而言没有上限 |
便于分享 | 不便于分享 |