学习ajax 总结

1、服务器客户端基础知识

通讯是指不一样计算机程序的通讯，单单经过ip地址就能知道你找的是哪一台计算机，可是不知道是计算机上的哪一个应用程序，要想知道是哪一个程序就必须经过端口。这时候就能够问端口究竟是什么了，简单点说端口就是计算机对外链接的出口，不一样的应用程序的出口不一样，因此咱们能够用端口来判断是哪一个应用程序，一般所说的80端口就是最www上网服务端口

在平常生活中咱们记住的都是网站的域名，由于域名有意义方便记住，而ip地址很差记住好比www.baidu.com。那咱们经过域名来访问网站时实际上是分为几步的

一、在本地的hosts文件中先查询有没有本地的服务器返回文件

二、若是没有就进行域名解析就是DNS，由于服务器厂商会将IP地址对应的域名都保存到抓吗的电脑上，这台电脑保存着域名和IP地址的映射关系

三、经过解析获得的IP地址，浏览器将发送http请求给服务器

四、服务器再返回数据给浏览器解析显示页面

2、ajax可以作什么

我认为ajax其实最重要的核心就是更好的交互。异步的javascript and XML。这个是ajax的解释，其实所谓的异步比起同步来讲ajax的优势就表如今：不用每一次页面的部分须要服务端数据时都去服务器端获取数据，而是部分去获取数据，这样就不会出现白屏和当前页面不可用的现象，也可以减小请求服务器而耗费资源占用带宽。那么在咱们平时的上网过程当中有哪些是用到了ajax技术呢？好比

一、百度搜索提示 二、快递单号查询 三、评论加载等

你能够发现它们在更新数据的时候页面并无彻底刷新，只是须要数据的地方刷新了。

3、ajax原理

能够说是浏览器为须要更新数据的元素建立了一个请求对象，这个请求对象去替浏览器完成向服务器请求数据的工做。这样浏览器就能够接着干别的事情了。具体的步骤以下

一、建立请求对象，可是须要注意的是考虑到浏览器的兼容性，为了代码复用我将兼容的代码放进一个createRequest的函数中

 

function createRequest(){
    try {
         request = new XMLHttpRequest();
    } catch(tryMS) {
        try{
            request = new ActiveXObject("Msxm12.XMLHTTP");
        }catch(otherMS){
            try{
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(failed){
                request = null;
            }
        }
    }
    return request;
    
}

二、建立了请求对象以后，能够说如今的请求对象只是一个啥都不会的孩子，由于它如今不知道本身是以什么方式与服务器通讯，也不知道去服务器要请求什么数据，因此咱们须要为它设置这些属性，就像教导 小孩子同样。

三、设置好请求对象以后，就能够与服务器创建链接了，创建链接是用open方法

request.open('GET/POST','url','true/false');

四、创建好链接以后，就能够发送了用到的是

request.send(null);

五、接下来就要用onreadystate来调用回调函数了

request.onreadystate = function(){}

　咱们须要知道的是在发送请求到服务器端后服务器并非在数据彻底解析好以后才与浏览器通讯的，而会在不一样阶段返回readystate的对应的状态码，当readystate=2时表示服务器正在处理请求。readystate=3时表示数据下载到请求对象，可是响应数据尚未准备好，只有当readystate=4时才表示服务器处理完成请求数据可使用，因此咱们须要限制回调函数执行的时间为当readystate = 4且status=200时执行

if(request.readystate == 4){
  if(request.status == 200){
      //将返回的数据进行处理，经常会用到json.parse将字符串转为json数据
    }      
}

4、跨域解决方案

因为安全方面的缘由ajax不能实现跨域，因此就有了jsonp的方式，可是jsonp其实并不复杂。原理就是经过script标签的src属性来找到不一样服务器下的资源文件，而后获得的数据进行解析，其实只要有src属性的标签都有跨域能力。解析的时候因为拼接字符串很麻烦，能够采用一些模板技术如artTemplate模板引擎。

5、GET与POST的区别

从使用的方面

一、绝大多数的请求都是get请求，get方式的ajax会有浏览器缓存。

二、当传递加密数据和数据量很大的时候用post

从监视请求方面

一、post发送的数据在请求体中，用户是看不到的

二、get发送的数据在地址栏中

6、ajax同步请求当设置request("GET",url,false)最后一个参数为false时就表示为同步请求，同步请求会形成在请求返回以前线程会一直阻塞，若是请求是在主线程中发起的，那就会形成整个浏览器阻塞。

浏览器就会报错：

　　Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

那么什么是主线程呢？这是在html5中提出来的，由于在html5以前js是彻底的单线程方式，主线程以外不存在其余线程，但在html5中增长了worke对象，每一个worker运行在一个独立的线程中，worker线程被阻塞是不会影响主线程和浏览器的。