美文网首页
AJAX小结

AJAX小结

作者: 我需要一瓶脉动 | 来源:发表于2019-07-11 09:54 被阅读0次

首先要明确一个问题,AJAX是什么,为什么要用AJAX?

Q1:什么是AJAX

A1:AJAX==>Asynchronous JavaScript and XML==>异步的JavaScript和XML

是与服务器交换数据,并能够在无需加载整个页面的情况下更新部分页面(即:异步局部更新);AJAX的基础是XMLHttpRequest,用于在后台与服务器交换数据

【AJAX包含的技术:XHTML+CSS;使用DOM进行动态显示与交互;使用XML和XSLT进行数据交换以及相关操作;使用XMLHttpRequest进行异步数据查询;使用JS将所有东西联系起来】

Q2:为什么要使用AJAX?

A2:因为传统的网页想要更新内容或者提交一个表单的时候需要重新加载整个页面

【A:通过异步模式提升了用户体验;优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用;AJAX引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大量用户下的服务器负载】

Q3:同步与异步?

怎样理解同步异步和阻塞非阻塞 - 简书

然后,来看看一个AJAX的实现流程是怎样的:

1)创建XMLHttpRequest对象

2)创建一个新的Http请求,并指定该HTTP请求的方法

2.1

【URL是服务器上文件的路径,可以是绝对路径也可以是相对路径】

【如果是POST方法就对send(string)进行参数设置;如果你需要向提交表单那样POST数据,使用setRequestHeader(header,value);当然如果是要用GET方法提交数据,那么可以在URL中加入需要的参数】

2.2

【GET请求更简单更快,大部分情况下都可以使用,但是在一下情况下使用POST:a:更新服务器上的文件或数据库;b:向服务器发送大量数据,因为POST没有数量限制;c:发送包含未知字符的用户输入时,POST比GET更稳定更可靠】

【async的选择,使用AJAX必须设置为true。async=true ==>异步,在等待服务器响应时可以执行其他的脚本,当响应后就对响应进行处理,在onreadystatechange中写执行函数;async=false =>同步,JS会等到服务器响应就绪以后才继续执行,如果服务器忙或者缓慢,程序将被挂起或停止,此时不需要写onreadystatechange】

3)服务器响应请求,并做出响应的处理,在readystate==4&&status==200时

3.0

【responseText:得到字符串形式的数据,json串,可以用JSON.parse()来转换;responseXML:得到XML形式的响应数据。】

【onraedystatechange会触发5次,分别对应0~4的状态变化,即:0=请求未初始化;1=服务器链接已建立(open方法成功调用后);2=请求已经接收(表示服务器答应了客户端的请求);3=请求处理中;4=请求已经完成,且响应就绪】

4)请求的数据在页面进行局部刷新(显示)

====

未完待续...........

相关文章

  • ajax小结

    1.创建对象 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,...

  • ajax小结

    在开发过程中ajax是必须的,对近期在ajax的使用上的心得进行总结。 一、关于ajax AJAX = Async...

  • ajax小结

    在平时的开发项目中,难免接触前端的知识,需要写接口,有时候用到js中的ajax跨越请求,总结了ajax的写法。 开...

  • AJAX小结

    1.AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。2.AJAX = 异步 JavaScr...

  • AJAX小结

    首先要明确一个问题,AJAX是什么,为什么要用AJAX? Q1:什么是AJAX A1:AJAX==>Asynchr...

  • Ajax 基础小结

    AjaxStudyNote (E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6W...

  • 小结--ajax的封装

    在前后端的交互过程中,ajax是一个常用的手段,但是其使用方法比较繁琐,所以封装一个惯用的方法。通常前后端交互的方...

  • 前端课程小结-Ajax

    ajax2.0比ajax1.0:1.formData: 控制提交数据、文件上传,服务器那边跟普通 一样的2.cor...

  • 【小结】AJAX和JSON

    AJAX:Asynchronous Javascript And XML”(异步 JavaScript 和 XML...

  • axios使用回顾

    .axios 使用小结 axios 在vue框架中用于向服务器请求数据,之前了解过一点jQuery 的AJAX 。...

网友评论

      本文标题:AJAX小结

      本文链接:https://www.haomeiwen.com/subject/krokkctx.html