ajax 和 jq

什么是AJAX？

　　ajax的本质就是xmlHttpRequest对象

　　即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术；

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

使用AJAX则不需要加载更新整个网页，实现部分内容更新

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

打开终端的快捷键

Window+R ==>CMD =>ipconfig

动态页面:跟后台发生数据交互的页面。

前后台数据交互依赖的一项技术叫ajax。

常见的ajax使用场景

谷歌地图，甚至一些弹幕，微博的时时更新评论等等

为什么需要使用ajax

ajax主要是实现页面和web服务器之间数据的异步传输。

简单来说，不采用ajax的页面，当用户在页面发起请求时，就要进行整个页面的刷新，刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待，不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低，用户体验差。

?

a、采用ajax的页面，可以实现页面的局部更新，而不是整个页面的更新；b、并且发起请求后，用户还可以进行页面上的其他操作。这就是异步的方式。c、客户端和服务端间只传递需要的数据，效率高，用户体验性好。d、并且Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

js的异步操作

(1)????? 定时器

(2)????? 事件

(3)????? 回调

(4)????? ajax

?

控制台出现三个属性??

readyState? 请求的五个阶段 0 1 2 3 4

responseText? 返回的文件内容

Status? 状态吗? 返回的状态信息

在__proto__有三个方法

Open()

Send()

onReadyStateChange()

了解

Xml 是一种数据存储格式 抛弃了

Json 是一种数据存储格式? 当前最流行的

status的状态码 ：? ?200? 成功了3xxx 代表禁用的意思

原生写法：

function ajax(fangshi,dizhi,buerzhi,fn){
? ? ? ? ? var xmlhttp=new XMLHttpRequest() //创建XMLHttpRequest对象
? ? ? ? ? ? ?xmlhttp.open(fangshi,buerzhi) //向服务器发送请求
? ? ? ? ? ? ?xmlhttp.send() //发送
? ? ? ? ? ? ?xmlhttp.onreadystatechange=function(){ //服务器响应(靠状态来判断响应到哪一步了)
? ? ? ? ? ? ? ? ?if(xmlhttp.readyState==4){ //请求的五个阶段(0-1-2-3-4)
? ? ? ? ? ? ? ?if(xmlhttp.status==200){ //返回请求的状态信息
? ? ? ? ? ? fn(xmlhttp.responseText) //返回文件的内容
? ? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ?}
}

AJAX传参

客户端和服务器

1. 请求 request
2. 响应 response

Ajax的请求方式

Get

看得见，传送数据小，通过网络地址传

post

?

XMLHttpRequest常用方法

open();

XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。

例：

xhr.open(‘POST‘,‘/carrots-admin-ajax/a/login‘,true);

参数:

a,method:用于指定请求的类型 ?"GET"或者"POST"

b,url:用于请求的地址,可相对可绝对

c,asyncFlag:指定请求方式为同步还是异步,true为异步,false为同步

send();

XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET

请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是 POST 请求。

var xhr = new XMLHttpRequest();

var data = ‘name=‘ + userVal + ‘&pwd=‘ + pwVal;

xhr.open(‘POST‘,true);