diff --git "a/34\351\231\210\346\264\213/\347\254\224\350\256\260/1129ajax.md" "b/34\351\231\210\346\264\213/\347\254\224\350\256\260/1129ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..44184ff77f8976db194f49a7e8c39dfa77ef9fd5 --- /dev/null +++ "b/34\351\231\210\346\264\213/\347\254\224\350\256\260/1129ajax.md" @@ -0,0 +1,165 @@ +### 一 什么是Ajax ? + +**(1)** + +ajax 全名 **async javascript and XML**(异步JavaScript和XML) + +是**前后台交互**的能⼒ 也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具 + +AJAX **不是新的**编程语言,而是一种**使用现有标准的新方法**。 + +AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。 + +是⼀个 默认异步执⾏机制的功能,**AJAX分为同步(async = false)和异步(async = true)** + +### (2) 什么是同步请求(false) + +```ajax +同步请求是指当前发出请求后,浏览器什么都不能做, + +必须得等到请求完成返回数据之后,才会执行后续的代码, + + 相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。 + + 也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态, + 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态 + +``` + +### (3) 什么是异步请求?(默认:true) + +```ajax +默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事, +Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。 +一般默认值为true,异步。异步请求可以完全不影响用户的体验效果, +无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。 + +``` + + + +### 二 Ajax的优势 + +不需要插件的⽀持,原⽣ js 就可以使⽤ + +⽤户体验好(`不需要刷新⻚⾯就可以更新数据`) + +减轻服务端和带宽的负担 + +缺点:搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到 + + + +**三 Ajax的操作流程** + +首先通过PHP页面将数据库中的数据取出 + +取出后转成json格式的字符串,后利用ajax把字符串返还给前台 + +再利用**json.parse**解析通过循环添加到页面上 + +那么反之,前端的数据可以利用ajax提交到后台 + +但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上 +最后再由PHP将数据插入到数据库中 + +### 四 Ajax的使用 + +在 js 中有**内置的构造函数**来创建 ajax 对象 + +创建 ajax 对象以后,我们就使⽤ ajax 对象的⽅法去发送请求和接受响应 + +Ajax的一个**最大的特点是无需刷新页面**便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。 + + +**1.创建⼀个 ajax 对象** + +```javascript +// IE9及以上 +const xhr = new XMLHttpRequest() +// IE9以下 +const xhr = new ActiveXObject('Mricosoft.XMLHTTP') +``` + +上⾯就有了⼀个 ajax 对象 +我们就可以使⽤这个` xhr 对象来发送 ajax 请求了` + + + +**2.配置链接信息** + +XMLHttpRequest 对象属性描述(`用于和服务器交换数据。`) + +```JavaScript +//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。 +const xhr = new XMLHttpRequest() +// xhr 对象中的 open ⽅法是来配置请求信息的 +// 第⼀个参数是本次请求的请求⽅式 get / post / put / ... +// 第⼆个参数是本次请求的 url +// 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步 +// xhr.open('请求⽅式', '请求地址', 是否异步) +xhr.open('get', './data.php') +1 +2 +3 +4 +5 +6 +7 +8 +上⾯的代码执⾏完毕以后,本次请求的基本配置信息就写完了 +``` + +3.发送请求 + +```JavaScript +//如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: +const xhr = new XMLHttpRequest() +xhr.open('get', './data.php') +// 使⽤ xhr 对象中的 send ⽅法来发送请求 +xhr.send() +``` + +上面代码是把配置好信息的 ajax 对象发送到服务端 + + + +```JavaScript + 一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤,我们确实能把请求发送到服务端 + 如果服务端正常的话,响应也能回到客户端 但是我们拿不到响应 + 如果想要拿到响应,我们需要有两个前提条件 + + 本次 HTTP 请求是成功的,也就是我们下面要说的 http 状态码为 200 ~ 299 + ajax 对象也有自己的状态码,用来表示本次 ajax 请求中各个阶段 + +``` + +### 5.AJAX 状态码 + +ajax 状态码 - xhr.readyState + +是用来表示一个 ajax 请求的全部过程中的某一个状态 + +```JavaScript + readyState === 0 : 表示未初始化完成,也就是 open 方法还没有执行 + readyState === 1 : 表示配置信息已经完成,也就是执行完 open 之后 + readyState === 2 : 表示 send 方法已经执行完成 + readyState === 3 : 表示正在解析响应内容 + readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了 + +这个时候我们就会发现,当一个 ajax 请求的全部过程中,只有当 readyState === +``` + + 4 的时候,我们才可以正常使用服务端给我们的数据 + +所以,配合 http 状态码为 200 ~ 299 + + + +```JavaScript +一个 ajax 对象中有一个成员叫做 xhr.status + 这个成员就是记录本次请求的 http 状态码的 +``` + + +两个条件都满足的时候,才是本次请求正常完成 \ No newline at end of file