jquery open跳转页面的url_前后端交互与Node：原生Ajax和jquery的ajax

大家好，我来了！本期为大家带来的Web前端学习知识是”前后端交互与Node：原生Ajax和jquery的ajax“，喜欢Web前端的小伙伴，一起看看吧！

主要内容

1. ajax是什么
2. ajax作用
3. 原生ajax请求
4. jquery的ajax请求
5. jquery里面封装的ajax方法

学习目标

第一节 Ajax与http

术语ajax最早产生于2005年，Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML)，但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术，它是表示一些技术的混合交互的一个术语（JavaScript、Web浏览器和Web服务器），它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验，更有桌面程序的感觉。

1.1 什么是Ajax？

Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互

1.2 Ajax可以做什么？

• 显示新的HTML内容而不用载入整个页面
• 提交一个表单并且立即显示结果
• 登录而不用跳转到新的页面
• 星级评定组件
• 遍历数据库信息加载更多而不刷新页面

1.3 客户端与服务器

本章作业

Ajax是什么 有什么用

第二节 Ajax请求步骤

2.1 Ajax请求分4步完成

1. 创建XMLHttpRequest对象
2. 准备发送请求 open()
3. 发送请求数据 send()
4. 请求返回的回调函数 onreadystatechange=function(){}

XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。 通俗上来说将此对象称为request请求对象、请求对象或请求。

2.1.1创建ajax步骤

1.创建XMLHttpRequest对象--进行ajax请求

对象用来在【浏览器】与【服务器】之间传送数据 浏览器提供给我们的对象

var  xhr=new XMLHttpRequest();

2.准备发送数据open()方法

语法：xhr.open(‘请求类型’，’url地址’，是否异步);

xhr.open('get','02-post.php',true);

3.发送 send() 实际发送的数据 get请求为空 null

xhr.send(null);

4.回调函数onreadystatechange属性指向一个回调函数。

当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。

  xhr.onreadystatechange=function(){
         if(xhr.readyState==4){//表示服务器数据已经完全接收
             if(xhr.status==200){//, OK，访问正常
                        console.log(xhr.responseText)
                    }
                }
            }

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

2.1.2 readyState状态码

2.1.3 get有参

     document.querySelector('.btn').onclick=function(){
            var username=document.querySelector('.name').value;
            var password=document.querySelector('.psd').value;
            var xhr=new XMLHttpRequest();
        xhr.open('get','06ajax_get.php?userName='+username+'&passWord='+password,true);
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        console.log(xhr.responseText);
                    }
                }
            }
        }

2.1.4 post有参

document.querySelector('.btn').onclick=function(){
            var username=document.querySelector('.name').value;
            var password=document.querySelector('.psd').value;
            var xhr=new XMLHttpRequest();//new Date()
            xhr.open('post','06ajax_get.php',true);
            vardata='userName='+username+'&passWord='+password;
         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
            xhr.send(data);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        console.log(xhr.responseText);
                    }
                }
            }
        }

2.1.5 获取json数据

  document.querySelector('.btn').onclick=function(){
            var xhr=new XMLHttpRequest();//new Date()            
            xhr.open('get','data/data.json',true);            
            xhr.send();          
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
 var dataJson=JSON.parse(xhr.responseText);
                        console.log(dataJson);
                        var books=dataJson.data;
                        for(var i=0;i<books.length;i++){
                            var lis=document.createElement('li');
                            lis.innerHTML=books[i].name;
                            document.getElementById('ul').appendChild(lis);        
                        }
                    }
                }
            }
        }

【json数据】

2.1.6 XMLHttpRequest兼容

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

【代码演示】

var xmlhttp;
 if (window.XMLHttpRequest) { 
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
xmlhttp=new XMLHttpRequest(); } 
else {// IE6, IE5 浏览器执行代码
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

2.1.7 timout

本章作业

1.默写ajax请求步骤

2.get传递参数post传递参数

3.json数据解析

第三节 jquery的ajax

3.1 Ajax步骤

$('#btn').click(function(){
            var name=$(".name").val();
            $.ajax({
                type:'post',//请求方式
                url:'09jquery_ajax.php',
                data:{
                    uname:name,
                }, 
                success:function(res){
                    console.log(res);
                    $(".info").html(res);
                },
                error:function(){
                    console.log("请求失败");
                },
                beforeSend:function(){//请求数据之前  执行的内容
                    console.log("数据请求中.....");
                    $(".info").html('数据请求中.....');
                },
            })
        })

3.2 回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。

error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象

dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。

success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

3.2.1防止重复数据

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，
进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据
插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁
用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。
举个例子：
// 提交表单数据到后台处理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

3.2.2模拟Toast效果

ajax请求服务器加载数据列表时提示loading(“加载中，请稍后...”),
$.ajax({
    type: "post",
    contentType: "application/json",
    url: "/Home/GetList",
    beforeSend: function () {
        $("loading").show();
    },
    success: function (data) {
        if (data == "Success") {
            // ...
        }
    },
    complete: function () {
        $("loading").hide();
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

本章作业

1.jquery的ajax步骤

2.beforeSend() complete()函数使用

第四节jquery的ajax方法

4.1 jquery封装的ajax方法

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.php", {},function(data){
          alert("Data Loaded: " + data);
},’json’);

.

$.getJSON(url, [data], [callback])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

.

$.post (url, [data], [callback],[type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.php", { name: "John", time: "2pm" },
          function(data){
          process(data);
          }, "xml");

4.2 从浏览器输入url地址，到页面最终渲染完成，中间发生了什么

1.DNS解析 将域名地址解析为ip地址

2.TCP连接 - TCP三次握手

第一次握手：由客户端发起，告诉服务端我将要发送请求了

第二次握手：由服务端发起，告诉客户端我知道了，你放马过来

第三次握手：由客户端发起，告诉服务端我知道了，你真的要发了，你赶紧准备接受

3. 发送请求 请求报文

4. 接受响应

5. 响应请求 处理数据

6. 发送数据 响应数据

7. 渲染页面

8. 断开连接 - TCP四次挥手

第一次挥手：由服务端发起，告诉客户端东西（请求报文）接受完了

第二次挥手：由客户端发起，告诉服务端，那好，我关闭了发送东西的接口

第三次挥手：由客户端发起，告诉服务端东西（响应报文）接受完了

第四次挥手：由服务端发起，告诉客户端我准备关闭了，你也准备关闭吧

本章作业

1.点击按钮显示数据

2.查询物流信息 获取数据 渲染到页面上

好了，本期为大家带来的Web前端学习新知识”前后端交互与Node：原生Ajax和jquery的ajax“介绍完毕了，想了解更多内容，关注我，我们下期再见！