Ajax 的学习

时间 2019-11-08

标签 ajax 学习栏目 Ajax 繁體版

原文原文链接

（一）基础知识和新的概念javascript

1，AJAX 就是浏览器提供的一套 API，能够经过 JavaScript 调用，从而实现经过代码控制请求与响应。实现php

网络编程。html

2，AJAX（Asynchronous JavaScript and XML表示的是异步的js和xml，因此就是说它仍是写在script标签中的。），最先出如今 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使咱们能够经过 JavaScript 直接获取服务端最新的内容而没必要从新加载页面。前端

3，计算机的组成部分：CPU（运算器和控制器）、存储器、输入设备、输出设备java

内存：程序一开始是在磁盘上的，要想运行必须首先加载在内存jquery

（二）计算机的通讯协议c++

1，协议：就是多个计算机进行通讯时定义的规则。（就是交流的双方事先约定好的规则）ajax

2，计算机编程语言两种类型sql

1》解释型 JavaScript、java、php编程

2》编译型 c、c++

3，HTTP服务器

即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务。

客户端

具备向服务器索取服务能力的终端

好比手机、电脑，客户端软件，浏览器、QQ、迅雷、Foxmail等

前端开发

以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，一般称之为前端开发。

注：这里会涉及到 B/S、C/S 结构(了解)

B/S结构：B：brower S:server 表示的是客户端浏览器服务模式，这个数据的修改彻底是在服务端。

C/S结构：C：client S:server 这个仅仅是当全部的客户端都更新了以后，服务端就不能在该数据了。

4，网络之间的计算机如何找到彼此？答案是IP地址，ip地址又是什么呢，那就让咱们接着往下看

5.HTTP响应码

响应码分为五种：

（1） 1xx：信息，请求收到，继续处理

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

（2） 2xx：成功，行为被成功地接受、理解和采纳

200 OK 请求成功。通常用于GET与POST请求

201 Created 已建立。成功请求并建立了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非受权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的状况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可经过此返回码清除浏览器的表单域

206 Partial Content 部份内容。服务器成功处理了部分GET请求

（3） 3xx：重定向，为了完成请求，必须进一步执行的动做

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择。

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。从此任何新的请求都应使用新的URI代替。

302 Found 临时移动。与301相似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301相似。使用GET和POST请求查看。

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端一般会缓存访问过的资源，经过提供一个头信息指出客户端但愿只返回在指定日期以后修改的资源。

305 Use Proxy 使用代理。所请求的资源必须经过代理访问。

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302相似。使用GET请求重定向

（4） 4xx：客户端错误，请求包含语法错误或者请求没法实现

400 Bad Request 客户端请求的语法错误，服务器没法理解。

401 Unauthorized 请求要求用户的身份认证。

402 Payment Required 保留，未来使用。

403 Forbidden 服务器理解请求客户端的请求，可是拒绝执行此请求。

404 Not Found 服务器没法根据客户端的请求找到资源（网页）。经过此代码，网站设计人员可设置"您所请求的资源没法找到"的个性页面。

405 Method Not Allowed 客户端请求中的方法被禁止。

406 Not Acceptable 服务器没法根据客户端请求的内容特性完成请求。

407 Proxy Authentication Required 请求要求代理的身份认证，与401相似，但请求者应当使用代理进行受权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突

410 Gone 客户端请求的资源已经不存在。410不一样于404，若是资源之前有如今被永久删除了可以使用410代码，网站设计人员可经过301代码指定资源的新位置。

411 Length Required 服务器没法处理客户端发送的不带Content-Length的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

413 Request Entity Too Large 因为请求的实体过大，服务器没法处理，所以拒绝请求。为防止客户端的连续请求，服务器可能会关闭链接。若是只是服务器暂时没法处理，则会包含一个Retry-After的响应信息。

414 Request-URI Too Large 请求的URI过长（URI一般为网址），服务器没法处理

415 Unsupported Media Type 服务器没法处理请求附带的媒体格式

416 Requested range not satisfiable 客户端请求的范围无效

417 Expectation Failed 服务器没法知足Expect的请求头信息

（5） 5xx：服务器错误，服务器不能实现一种明显无效的请求

500 Internal Server Error 服务器内部错误，没法完成请求。

501 Not Implemented 服务器不支持请求的功能，没法完成请求。

502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求。

503 Service Unavailable 因为超载或系统维护，服务器暂时的没法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求。

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，没法完成处理。

（三）json数据的两种转换的方式

(1)JSON.stringify() 转为json字符串，
 (2)JSON.parse() 转为json数组

（四）网络基础

1，IP地址

所谓IP地址就是给每一个链接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话须要一个号码同样)

查看本机IP地址 ipconfig、ifconfig（使用cmd命令，打开黑窗口，输入这两个命令，能够查看本身本机的ip地址）

2，域名

域名是一个IP地址的“面具”，因为IP地址基于数字，不方便记忆，因而便用域名来代替IP地址。

查看域名对应的IP地址 ping、tracert

域名和IP地址：对应关系不必定是一一对应的（有多是多个域名对应一个ip地址）

3.端口

端口号是计算机与外界通信交流的出口，每一个端口对应不一样的服务（用来区分电脑上特定应用网络应用程序）

常见端口号 80（http的端口）、8080、3306（Mysql的默认的端口）、21、22

4，DNS

DNS记录了 IP 地址和域名的映射（对应）关系；

查找优先级本机hosts文件、DNS服务器

若是访问http://www.baidu.com/地址的时候计算机所进行的内部的操做。

一、域名解析（DNS）

二、经过解析道德IP地址找到对应的计算机

（五）认识什么是异步和同步

1，先来一波类比

当咱们浏览网页的时候两种状况：

一、白屏（这就是咱们所说的“同步”）

二、页面不刷新（异步）局部更新页面不会全屏刷新

（六）AJAX的详解

1，原生的ajax的实现（以下面的代码）

（1）兼容的处理

XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，能够经过另一种方式代替封装

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')；

//第一步就是：建立xhr对象
              var xhr=null; 
//下面的要处理一下兼容
      if (window.XMLHttpRequest){
           //标准的浏览器下面
            xhr=new XMLHttpRequest();
          }else{
          //早期的浏览器下
           xhr=new ActiveXObject('Microsoft.XMLHTTP');
        }
//对于处理的兼容,咱们也能够采用下面的异常处理的方式
（

var xhr = null;
	try{
	xhr = new XMLHttpRequest();
	}catch(e){
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

）
//第二步：准备发送请求---就是配置发送的一些行为
//对于的这个open的方法中有三个参数，第一个参数是以什么方式发送请求，第二个参数就是所要发送请求的地址，第三个参数就是是异步操做仍是同步操做，通常默认下是异步的操做（true）
             xhr.open(type.url,true)；
//第三步：执行发送的动做
//这里面的param表示的是咱们发送请求的时候，所传递的参数。（对于若是是以get，这里面的参数是null，通常的若是以get的形式进行请求的话，咱们的传递的参数会放在url加？的后面进行传递，若是是以post的方式进行传递的话，就会把所要传递的参数放在这个变量中。
             xhr.send(param);
//第四步：指定一些回调函数
        xhr.onreadystatechange=function(){
                  if(xhr.statusState==4){
                             if(xhr.status==200){
                                         console.log(xhr.responseText);
                                }
                      }

2，xhr对象中有一个readyState的属性。这个属性是因为 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在获得响应时），也就意味着这个事件会被触发屡次，因此咱们有必要了解每个状态值表明的含义：

readyState	状态描述	说明
0	UNSENT	代理（XHR）被建立，但还没有调用 open() 方法。
1	OPENED	open() 方法已经被调用，创建了链接。
2	HEADERS_RECEIVED	send() 方法已经被调用，而且已经能够获取状态行和响应头。
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据。
4	DONE	响应体下载完成，能够直接使用 responseText 。

3，以get的方式进行传递的代码

var xhr = new XMLHttpRequest()
// GET 请求传递参数一般使用的是问号传参
// 这里能够在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 通常在 GET 请求时无需设置响应体，能够传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState ！=== 4) return；
       console.log(this.responseText)

}
注意：
1，若是要是以get的类型进行的传参数，若是是乱码的的话，咱们可使用下面的这个方法 encodeURIComponet（你所传递的参数的值）,
案例：var url = '05open.php?username='+ encodeURIComponet(username)+'&password='+password;
2，解决get浏览器缓存的问题，通常的咱们都会在咱们的传递的url地址的后面加上一个毫秒数，这样的话，能够刷新每一次新的数据，"url?data&_t="+new Date().g
etTime() 这样的话就能够解决问题啦。

4，以post方式请求的代码，若是要是以post的方式来发送请求的话，这个时候咱们传递的参数是在send方法中进行传递的。这个参数传递的时候，咱们必定要按照咱们传递的格式进行，设置咱们请求体中的向服务器中发送的格式，不然的话，就有可能会出现乱码的状况。

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的做用就是设置请求的 method
//请求行
xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识这次请求的请求体格式为 urlencoded 以便于服务端接收数据
//请求头
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 须要提交到服务端的数据能够经过 send 方法的参数传递
// 格式：key1=value1&key2=value2
//请求体
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

注意：咱们设置post中这个请求头的意思（这个表示的就是咱们的客户端向咱们的服务端发送的数据的格式的类型）

这个类型通常包括下面几个格式。

1，发送json格式数据,

xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

2，发送表单数据

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

3，发送纯文本

不指定Content-type时，此是默认值值

xhr.setRequestHeader("Content-type", "text/plain; charset=utf-8");

4，发送html文本

xhr.setRequestHeader("Content-type", "text/html; charset=utf-8");

5，原生ajax的封装的两种形式

（1）传入的是多个参数

// 封装者 
// ============================= 

function ajax (method, url, params, done) { 
method = method.toUpperCase() 
var xhr = new XMLHttpRequest() 

if (typeof params === 'object') { 
var tempArr = [] 
for (var key in params) { 
var value = params[key] 
tempArr.push(key + '=' + value) 
} 
params = tempArr.join('&') 
} 

if (method === 'GET') { 
url += '?' + params 
} 

xhr.open(method, url, false) 

var data = null 
if (method === 'POST') { 

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
data = params 
} 

xhr.onreadystatechange = function () { 
if (this.readyState !== 4) return 
// 不该该在封装的函数中主观的处理响应结果 
// console.log(this.responseText) 
// 你说我太主观，那么你告诉我应该作什么 
done(this.responseText) 
} 

xhr.send(data) 
} 

// 调用者 
// ============================ 

var onDone = function (res) { 
console.log('hahahahaha') 
console.log('hohohohoho') 
console.log(res) 
console.log('作完了') 
} 

ajax('get', 'time.php', {}, onDone)

（2）传入的是一个对象参数

<script type="text/javascript">

function ajax(data){
    //data={data:"",dataType:"xml/json",type:"get/post"，url:"",asyn:"true/false",success:function(){},failure:function(){}}

    //data:{username:123,password:456}
    //data = 'username=123&password=456';
    //第一步：建立xhr对象
    var xhr = null;
    if(window.XMLHttpRequest){//标准的浏览器
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //第二步：准备发送前的一些配置参数
    var type = data.type == 'get'?'get':'post';
    var url = '';
    if(data.url){
        url = data.url;
        if(type == 'get'){
            url += "?" + data.data + "&_t="+new Date().getTime();
        }
    }
    var flag = data.asyn == 'true'?'true':'false';
    xhr.open(type,url,flag);

    //第三步：执行发送的动做
    if(type == 'get'){
       xhr.send(null);
    }else if(type == 'post'){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.send(data.data);
    }

    //第四步：指定回调函数
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == 'function'){
                    var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.failure == 'function'){
                    data.failure();
                }
            }
        }
    }

}





    window.onload = function(){
        //注册按钮单击事件
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var param = {
                url:'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=101010100',
                type:'get',
                dataType:'json',
                success:function(data){
                    alert(data);
                }
            };
            ajax(param);
        }
    }

（七）服务响应的两种的数据格式

1. XML

如今大都不使用这种格式啦，都已经被淘汰了。

2，json

也是一种数据描述手段，相似于 JavaScript 字面量方式。

注意：这两种数据的格式，无论是 JSON 也好，仍是 XML，只是在 AJAX 请求过程当中用到，并不表明它们之间有必然的联系，它们只是数据协议罢了。

（八）对于服务传回来的数据，咱们经过模板引擎进行渲染。

通常咱们使用的模板引擎主要是 artTemplate模板。（使用模板引擎的好处是，简单，方便，快捷）

咱们也能够不使用模板引擎，咱们也可使用，咱们的js代码动态的渲染咱们从服务端渲染的数据。

（九）jQuery中的ajax的请求方法

1，准备工做

首先引入jquery文件

2，jquery中的几种使用的方法

（1）$.ajax();

$.ajax({
url: './get.php',               //url：请求地址
type: 'get',                    //type：请求方法，默认为 get
dataType: 'json',               //dataType：服务端响应数据类型(一旦设置的 dataType 选项，就再也不关心 服务端 响应的 Content-Type 了,

客户端会主观认为服务端返回的就是 JSON 格式的字符串)

data: { id: 1 }, //data：须要传递到服务端的数据，若是 GET 则经过 URL 传递，若是 POST 则经过请求体传递

beforeSend: function (xhr) {      //请求发起以前触发
console.log('before send')
},
success: function (data) {         //：请求成功以后触发（响应状态码 200）
console.log(data)
},
error: function (err) {            //请求失败触发
console.log(err)
},
complete: function () {                请求完成触发（无论成功与否）
console.log('request completed')
}
})

下面是jquery中ajax中type分别为get和post的两种方式的对比。

(2) $.get()

$.get('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}

(3) $.post()

$.post('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}

(4)$.getJSON()

$.getJSON('json.php', { id: 1 }, function (res) {
      console.log(res) ；
}
//对于后面的这三个方法中的回调函数，都是成功返回数据时的回调函数。

（十）同源策略

1，概念：同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口彻底相同，只有同源的地址才能够相互经过AJAX 的方式请求。

2，跨域：同源或者不一样源说的是两个地址之间的关系，不一样源地址之间请求咱们称之为跨域请求。

（十一）实现跨域的方式

（1）iframe

（2）jsonp

$(function(){

    $.ajax({
        type : "get",
        async: false,
        url : "./jsonp.php",
        dataType : "jsonp",
        //jsonp: "qwe",//传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(默认为:callback)
        //jsonpCallback:"liudehua",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(相似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);)
        success : function(data){
            console.log(data);
        },
        error:function(){
            console.log('fail');
        }
    });

});

（3）CORS

CORS ：Cross Origin Resource Share，跨域资源共享

/ /容许远端访问
header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端做出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否容许指定域请求

(4)也可使用jacascript标签实现咱们跨域资源的共享

原理：就是先添加一个script标签到页面中，而后引入咱们引于的ip地址，在咱们引入的ip地址中有一个回调函数的名字，这个时候咱们须要在当前的页面中，在建立一个函数，在这个函数中实施对数据的渲染。

（十二）补充知识点

1，函数

（1）函数的定义方式

第一种方式： function 函数名(参数列表。。。){

//函数功能代码
}

第二种方式：函数表达式

var fn1 = function(){

console.log(1111);
};

2，函数的几种方式

1》能够做为参数(表示的是回调函数）

2》能够做为返回值（这样就构成了闭包）

3，javascript 代码运行分连个阶段：

一、预解析 --- 把全部的函数定义提早，全部的变量声明提早，变量的赋值不提早
二、执行 --- 从上到下执行（setTimeout，setInterval,ajax中的回调函数，事件中的函数须要触发执行）

对于上面的两种的函数定义的方式来讲，若是没有函数定义以前，第一种会有预编译的行为，也会调用函数，可是第二种，是会报错的。

最后，发表一下本身的小小的感想，忽然发现总结本身学过的知识仍是挺好的，这样能够作到巩固加提升，先写这么多，本身写的很差，还请评论补充，后续我还会再加的。加油每一天，后面继续加油。

1. Ajax的学习
2. 【AJAX】Ajax学习总结
3. AJAX学习（一）了解 AJAX
4. AJAX学习
5. Ajax 学习
6. 学习Ajax
7. Ajax学习
8. 学习AJAX（二）
9. 学习AJAX（一）
10. ajax学习
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• 适用于PHP初学者的学习线路和建议
• Tomcat学习笔记（史上最全tomcat学习笔记）