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,dizhi,buerzhi) //向服务器发送请求
xmlhttp.send() //发送
xmlhttp.onreadystatechange=function(){ //服务器响应(靠状态来判断响应到哪一步了)
if(xmlhttp.readyState==4){ //请求的五个阶段(0-1-2-3-4)
if(xmlhttp.status==200){ //返回请求的状态信息
fn(xmlhttp.responseText) //返回文件的内容
}
}
}
}

AJAX传参

客户端和服务器

请求 request
响应 response

Ajax的请求方式

Get

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

post

看不见，传送数据大一些，通过http中的某个对象的一个body属性

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', '/carrots-admin-ajax/a/login', true);

---------------------
作者：jnshu_it
来源：CSDN
原文：https://blog.csdn.net/jnshu_it/article/details/83858684
版权声明：本文为博主原创文章，转载请附上博文链接！