今日学习Ajax

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。

同步与异步的区别

同步的理解:

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;

同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

同步是阻塞模式，异步是非阻塞模式

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页〔不使用AJAX〕如果需要更新内容，必需重载整个网页面。

XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

以前Ajax是用XMIL格式的字符串进行数据交换。现在已经被JSON取代了。

Ajax特点:

优点:

可以无需刷新页面，与服务器进行通信

允许依据用户事件来更新部分页面内容

缺点:

没有浏览历史，不能回退

存在跨域问题（同源)

SEO不友好（搜索引擎优化，对爬虫不友好)

AJAX原理

客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest把请求提交给服务，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由javascript把数据写到页面上。

 原生AJAX

Ajax工作流程：

Ajax通过XmlHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面。

(1）创建Ajax对象(XmlHttpRequest)

var xmlhttp=new XMLHttpRequest();

(2）判断数据的传输方式(get/post)，打开连接open()

xmlhttp.open("get" , "http://127.0.0.1:8089" , true) ;

(3）获得响应

如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。

 onreadystatechange事件

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

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

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

下面是XMLHttpRequest对象的三个重要的属性:

 在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState 等于4且状态为200时，表示响应已就绪。

如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText或 responseXML属性。

responseText 获得字符串形式的响应数据。

responseXML获得XML形式的响应数据。

(4）发送send()

xmlhttp.send() ;

 

$.ajax()

执行异步AJAX请求。

定义和用法

ajax()方法用于执行AJAX(异步 HTTP)请求。

所有的jQuery AJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。

语法

$.ajax({name:value，name:value，... })

该参数规定AIAX请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值

 $.get()和$.post()

jQuery get()和 post()方法用于通过HTTP GET或POST请求从服务器请求数据。

HTTP请求:GET vs POST

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

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

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

GET基本上用于从服务器获得(取回）数据。注释:GET方法可能返回缓存数据。

POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

 $.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法:

$.get(URL ,callback);
或
$.get( URL [,data ] [， cal1back ] [， dataType ] )

URL:发送请求的URL字符串。

 data:可选的，发送给服务器的字符串或key/value键值对。

 callback :可选的，请求成功后执行的回调函数。

 dataType:可选的，从服务器返回的数据类型。默认︰智能猜测（可以是xml, json, script,或 html)