本篇内容介绍了“如何用ajax来进行交互”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。1 Ajax: asynchronous javascript and xml (异步js和xml)2 是可以与服务器进行(异步/同步)交互的技术之一。1999年,微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp
直到2005年,google公司发布了一个邮箱产品gmail,内部有使用ajax技术,该事情引起人们对ajax的注意,也使得一蹶不振的javascript语言从此被人们重视起来浏览器内建对象,用于与服务器通信(交换数据) , 由此我们便可实现对网页的部分更新,而不是刷新整个页面。这个请求是异步的,即在往服务器发送请求时,并不会阻碍程序的运行,浏览器会继续渲染后续的结构。ajax的运行一定要打开phpsudy,js文件与php文件在同一主机下,才能请求成功.主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.手册位置http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp例1:在页面中添加一个按钮,点击一次向php后台发送一个请求,php将一段文字写入a.txtphp代码如下通过监控请求状态,当状态等于4的时候才能接受数据xhrObj.onreadystatechange – 监听readyState状态,当状态发生改变可调用对应函数处理ajax五种状态的作用/*xhrObj.readyState – 返回当前请求的状态
xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
xhr.readyState = 1时-初始化,对象建立未调用send()
xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
xhr.readyState = 3时-数据传输中,接受部分数据
xhr.readyState = 4时-响应内容解析完成
*/例:获取ajax请求过程的四种状态返回服务器状态码 xhr.status1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。接受服务器返回值服务器代码总结:1 get是地址栏的方式访问的,是可见的2 get方式传递数据量比较小.安全性低.3 post以非地址栏的形式访问,能够安全且大量的穿递数据常见post使用表单中使用, ajax中使用创建Ajax对象。设置回调函数。接收后台返回的结果设置请求设置请求头信息“Content-type,application/x-www-form-urlencoded”发送请求。setRequestHeader() 设置请求头信息application/x-www-form-urlencoded 设置传递参数时,使用的编码格式(默认)例:以post的方式传递数据异步:不等待ajax请求响应完毕,直接执行下面的代码同步:等待ajax请求响应完毕后,再执行下面的代码异步示意图同步请求js代码PHP代码测试同步请求时,获取返回结果的responseText一定要放在send免费云主机、域名()之前Text(又称HTML格式)XML格式JSON格式使用JOSN.parse()将PHP输出的json字符串转化为对象回调函数是一个作为变量传递给另外一个函数的函数,它在主体函数执行完之后执行。正常的代码都是链式操作,某一步执行出问题,则向下停止,而回调则不然.在回调函数中嵌套,就是上一个函数执行完成,再执行下一个在JavaScript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现.Promise使ES6中引入的一个异步编程解决方案,与传统的ES5方法相比它的结构更合理,功能更强大.Promise
对象代表一个异步操作,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.语法:.then(callback)的使用(成功时调用).catch(callback的用法(失败时调用)注意:resolve和reject的两种状态resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。使用promise检测ajax的请求状态,利用promise的成功状态函数,返回ajax请求到的数据第一步,将ajax进行封装第二步:使用then和catch获取结果,所有的异步请求完成才执行的方法.Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。“如何用ajax来进行交互”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
相关推荐: JavaScript更改元素、删除元素、拼接数组的方法
今天小编给大家分享一下JavaScript更改元素、删除元素、拼接数组的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 位移元素 位移与弹出…