js的ajax与jq的ajax总结

最新推荐文章于 2024-04-09 21:30:56 发布

seven-yang

最新推荐文章于 2024-04-09 21:30:56 发布

阅读量918

点赞数 1

分类专栏： js基础

本文链接：https://blog.csdn.net/yangyixue123/article/details/75279726

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原生ajax原理及应用

ajax基础

1.什么是服务器：网页浏览过程分析，浏览器服务器文件localhost/文件.txt，这种方式和用路径在浏览器上打开的方式是不同的，前者是在服务器上

2.ajax：Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术
通俗的来讲：

（1）没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新

（2）用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。

（3）AJAX的缺点：前进后退按钮被破坏，搜索引擎支持不够，开发调试工具缺乏

与传统的web应用比较

（1）传统的web应用：

传统的Web应用交互由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

（2）ajax：

AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

同步过程

这里写图片描述

异步过程

这里写图片描述

同步：脚本会停留并等待服务器发送回复然后再继续

异步：脚本允许页面继续其进程并处理可能的回复

异步更新是后台和服务器进行少量数据交换，即不重新加载整个网页就可以对网页的某部分进行更新。而AJAX减少了用户的等待时间。展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到JavaScript后台进行的发送请求和接受响应。

同步和异步之间相差一个XMLHttpRequest（XHR）的对象，来让后台与服务器之间交换数据，并同时对网页进行部分更新（即异步请求，局部刷新）

跨域：不同的域之间相互请求资源

ajax的跨域问题：

默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略可以预防某些恶意行为。

实现合理的跨域请求对开发某些浏览器应用程序至关重要。

主要有以下几种方法：

a.CORS，跨域资源共享，定义了必须在访问跨域资源时，浏览览器与服务器该如何沟通，基本思想是，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否成功。注意，请求和响应都不包含cookie信息。IE8通过XDomainRequest对象支持CORS，其它浏览器通过XHR对象原生支持CORS。

b.JSONP，填充式JSON，应用JSON的一种新方法。
它是被包含在函数调用中的JSON，例如，
callback（{“name”： “abc”}）；
JSONP由两部分组成，毁掉函数和数据。毁掉函数是当响应到来时应该在页面中调用的函数。数据时传入毁掉函数中的JSON数据。

JSONP只支持 “GET” 请求，但不支持 “POST” 请求。

var eleScript= document.createElement("script"); //创建一个script元素

eleScript.type = "text/javascript"; //声明类型、

eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url

document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素

ajax实现的步骤

创建XHR对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新

如何使用XHR

①创建XHR对象

var request = new XMLHttpRequest();

注意ie5和ie6不支持
（
    兼容方法：var request = new ActiveXObject("Microsoft.XMLHTTP");
）

②进行HTTP请求

http是一种无状态协议（服务端不保留相关信息，无记忆），可以使浏览器从服务器请求信息和服务

HTTP请求

完整请求过程：

这里写图片描述

将以上分为两个过程：请求和响应

a.请求过程
 1.http请求的方法，如GET或者POST请求
 2.正在请求的URL地址（发出请求的地址）
 3.请求头，如客户端环境的信息，身份验证信息等
 4.请求体，包含客户提交的查询字符串信息，表单信息等

（请求头和请求体之间有一个空行，表示请求头已经结束，开始运行请求体）

请求方法：

GET：用于获取数据（如：浏览贴子）的默认方法，多用于查询，用url传递参数，任何人可见。

POST：用于上传数据（如：用户注册），用于修改服务器资源，对数量无限制

GET、POST的区别 :

GET在url里传送数据：安全性低、容量小

POST安全性一般、容量几乎无限

GET便于分享（商品地址和url有关），适合获取，且会缓存

POST更适合上传（图片等）

b.响应组成
 1.一个数字和文字组成的状态码，用来显示请求成功还是失败
 2.响应头，包含服务器类型、日期类型、内容类型、长度等
 3.响应体 即相应正文

③XMLHttpRequest请求

方法一、open（method，url，async）

method:发送请求方法（ GET、POST不分大小写）

url:请求地址（相对地址或者绝对地址）

async:请求异步（即true）或者同步(false),默认异步

方法二、send(string)发送到服务器

get时参数不写或者null

post时参数必须填写

例子

request.open("GET","get.php",ture);
request.send();
//get.php地址

//创建王二狗
request.open("POST","create.php",ture);

//设置http头信息，发送表单。setRequestHeader必须在open和send中间
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男")；

③XMLHttpRequest响应

属性

这里写图片描述

readystate属性：监听这个属性来判断事件是否响应完成，并取得成功

这里写图片描述

重要

<script>
//创建XHR
    var request = new XMLHttpRequest();
//请求    
    request.open("GET","get.php",true);
    request.send();
//响应
    //用readystate监听，满足if条件
    request.onreadystatechange = function(){  
     if(request.readyState===4&&request.status===200){
            //随便做些啥     
     request.responseText
        }
    }
</script>

例子：（php不想看）

查询员工信息，可以通过输入员工编号查询员工基本信息

新建员工信息，包含员工姓名，员工编号，员工姓名，员工职位

（需要用php页面实现查询员工和新建员工的后台接口）

服务端由php实现

客户端实现


<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName"/><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber"/><br>
<label>请输入员工性别：</label>
<select id="staffSex">
    <option>男</option>
    <option>女</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob"/><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script>
    document.getElementById("search").onclick = function(){
        //发送ajax查询并处理
        //新建XHR
        var request = new XMLHttpRequest();
        //请求
        request.open("GET","service.php?number="+document.getElementById("heyword").value);
        request.send();
        //响应，进行事件监听，获取onreadystatechange，判断是否请求成功，请求成功则进行页面更新
        request.onreadystatechange = function(){
            if(request.readyState===4){
                if(request.status===200){
                    document.getElementById("searchResult").innerHTML = request.responseText;
                }else{
                    alert("发生错误:"+request.status);
                }
            }
        }
    }

    document.getElementById("save").onclick = function(){
        var request = new XMLHttpRequest();
        request.open("POST","service.php");
        //构造参数
        var data = "name=" +document.getElementById("staffName").value
                     +"&number=" +document.getElementById("staffNumber").value
                     +"&sex=" +document.getElementById("staffSex").value
                     +"&job=" +document.getElementById("staffJob").value;
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");             
        request.send(data);
        request.onreadystatechange = function(){
            if(request.readyState===4){
                if(request.status===200){
                    document.getElementById("createResult").innerHTML = request.responseText;
                }else{
                    alert("false:"+request.status);
                }
            }
        }
    }
</script>

jQuery的ajax

Jquery是将原生的Javascript封装好了成为了一个库,

jquery.ajax([settings])

1.type:类型，“POST”或 “GET”,默认为“GET”

2.url : 发送请求的地址

3.data：是一个对象，连同请求发送到服务器的数据

4.dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”

5.success：是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

6.error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

将js的ajax进行jq的改进

//引入jquery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
//初始化jquery
 $(document).ready(function(){
   //GET请求
       $("#search").click(function(){
       //$.ajax是对js中代码的封装，仅需要配置一些属性
           $.ajax({
               type:"GET",
               url:"service.php?number="+$("#keyword").val(),
               dataType:"json",
               success:function(data){
                  if(data.success){
                      $("#searchResult").html(data.msg);
                  }else{
                      $("#searchResult").html("出现错误："+data.msg);
                  }
               },
               error:function(jqXHR){
                   alert("发生错误："+jqXHR.status);
               }
           });
       });

//post请求
        $("#save").click(function(){
            $.ajax({
                type:"POST",
                url:"service.php",
                dataType:"json",
                //不用拼成url格式，直接用json拼写
                data:{
                    name:$("#staffName").val(),
                    number:$("#staffNumber").val(),
                    sex:$("#staffSex").val(),
                    job:$("#staffJob").val(),
                },
                success:function(data){
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }else{
                        $("#createResult").html("出现错误："+data.msg);
                    }
                },
                error:function(jqXHR){
                    alert("发生错误："+jqXHR.status);
                }
            });
        });

    });
</script>

在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

jQuery使用$符号作为 jQuery 的简介方式。换种方式$是JQuery的别名。
Ajax是一种技术，而JQuery只是实现了这种技术的一种方式，当然还有别的方式，可以实现AJAx这种技术。

seven-yang

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js的ajax与jq的ajax总结

原生ajax原理及应用ajax基础1.什么是服务器：网页浏览过程分析，浏览器服务器文件localhost/文件.txt，这种方式和用路径在浏览器上打开的方式是不同的，前者是在服务器上2.ajax：Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术通俗的来讲：（1）没用AJAX的网页，你点一...
复制链接

扫一扫