学习ajax 总结
一、服务器客户端基础知识
通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口。这时候就可以问端口到底是什么了,简单点说端口就是计算机对外连接的出口,不同的应用程序的出口不同,所以我们可以用端口来判断是哪个应用程序,通常所说的80端口就是最www上网服务端口
在日常生活中我们记住的都是网站的域名,因为域名有意义方便记住,而ip地址不好记住比如www.baidu.com。那我们通过域名来访问网站时其实是分为几步的
1、在本地的hosts文件中先查询有没有本地的服务器返回文件
2、如果没有就进行域名解析就是DNS,因为服务器厂商会将IP地址对应的域名都保存到抓吗的电脑上,这台电脑保存着域名和IP地址的映射关系
3、通过解析得到的IP地址,浏览器将发送http请求给服务器
4、服务器再返回数据给浏览器解析显示页面
二、ajax能够做什么
我认为ajax其实最重要的核心就是更好的交互。异步的javascript and XML。这个是ajax的解释,其实所谓的异步比起同步来说ajax的优点就表现在:不用每一次页面的部分需要服务端数据时都去服务器端获取数据,而是部分去获取数据,这样就不会出现白屏和当前页面不可用的现象,也能够减少请求服务器而耗费资源占用带宽。那么在我们平时的上网过程中有哪些是用到了ajax技术呢?比如
1、百度搜索提示 2、快递单号查询 3、评论加载等
你可以发现它们在更新数据的时候页面并没有完全刷新,只是需要数据的地方刷新了。
三、ajax原理
可以说是浏览器为需要更新数据的元素创建了一个请求对象,这个请求对象去替浏览器完成向服务器请求数据的工作。这样浏览器就可以接着干别的事情了。具体的步骤如下
1、创建请求对象,但是需要注意的是考虑到浏览器的兼容性,为了代码复用我将兼容的代码放进一个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; }
2、创建了请求对象之后,可以说现在的请求对象只是一个啥都不会的孩子,因为它现在不知道自己是以什么方式与服务器通信,也不知道去服务器要请求什么数据,所以我们需要为它设置这些属性,就像教导 小孩子一样。
3、设置好请求对象之后,就可以与服务器建立连接了,建立连接是用open方法
request.open('GET/POST','url','true/false');
4、建立好连接之后,就可以发送了用到的是
request.send(null);
5、接下来就要用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数据
}
}
四、跨域解决方案
由于安全方面的原因ajax不能实现跨域,所以就有了jsonp的方式,但是jsonp其实并不复杂。原理就是通过script标签的src属性来找到不同服务器下的资源文件,然后得到的数据进行解析,其实只要有src属性的标签都有跨域能力。解析的时候由于拼接字符串很麻烦,可以采用一些模板技术如artTemplate模板引擎。
五、GET与POST的区别
六、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线程被阻塞是不会影响主线程和浏览器的。
学习ajax 总结的更多相关文章
- 学无止境,学习AJAX,跨域(三)
学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- 学无止境,学习AJAX(一)
什么是AJAX?异步JavaScript和XML. AJAX是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- 学习ajax总结
之前公司的ajax学习分享,做一点总结,加深记忆 什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互 借阅用户操作时间,减少数据请求,可以无刷新请求数据 创建一个对象 ...
- 学习Ajax小结
Ajax 学习 1.ajax的概念 局部刷新技术,不是一门新技术,是多种技术的组合,是浏览器端技术 2.作用 可以实现 ...
- 学无止境,学习AJAX(二)
POST 请求 一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...
- 学习Ajax
1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不 ...
- 对学习Ajax的知识总结
1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互, ...
- [Django学习]Ajax访问静态页面
Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...
随机推荐
- STL学习系列三:Deque容器
1.Deque简介 deque是“double-ended queue”的缩写,和vector一样都是STL的容器,deque是双端数组,而vector是单端的. deque在接口上和vector非常 ...
- Unity3D中关于场景销毁时事件调用顺序的一点记录
先说一下我遇到的问题,我弄了一个对象池管理多个对象,对象池绑定在一个GameObject上,每个对象在OnBecameInvisible时会进行回收(即移出屏幕就回收),但是当场景切换或停止运行程序时 ...
- C#学习笔记(二):继承、接口和抽象类
继承 密封类 密封类(关键字sealed)是不允许其它类继承的,类似Java中的final关键字. public sealed class SealedClassName { //... } 初始化顺 ...
- AngularJS~大话开篇
AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 前端 ...
- kotlin使用手记
几个月前接触过scala,当时下载一个库用maven引入,弄了很久,后来觉得没起一个项目有点重量级,一次偶然机会在升级idea的时候,发现jetbrains官网出了一门新的jvm编程语言kotlin, ...
- MEF 编程指南(七):使用目录
目录(Catalogs) MEF 特性编程模型的核心价值,拥有通过目录动态地发现部件的能力.目录允许应用程序轻松地使用那些通过 Export Attribute 注册自身的导出.下面列出 MEF ...
- 教你50招提升ASP.NET性能(十七):不要认为问题只会从业务层产生
(28)Don’t assume that problems can only arise from business logic 招数28: 不要认为问题只会从业务层产生 When beginnin ...
- ubuntu 15.04开放mysql远程连接
首先查看端口是否打开 netstat -an|grep 3306 此图为开启3306端口的截图,之前显示为. . . 127.0.0.1:3306 . . . 打开mysql配置文件vi /etc/m ...
- IOS App动态更新
框架 JSPatch WaxPatch react-native 方案对比 目前已经有一些方案可以实现动态打补丁,例如WaxPatch,可以用Lua调用OC方法,相对于WaxPatch,JSPat ...
- [ES6] 16. Object Enhancements
Define object: var color = "blue"; var speed = 120; var car = {color, speed}; console.log( ...