JavaScript 原生Ajax

js原生的ajax，主要是做前后端分离项目，请求API （程序应用级接口）

调用的结果：后台数据返回
跨域原理（为什么会有跨域）： cros jsonp
异步请求局部刷新技术—朋友圈评论点赞
对象： XMLHttpRequest
状态码： 200 成功； 404 丢失；500服务器
提供API：open 建立服务器之间的链接参数1：请求的方式 get post 参数2:api路径参数3：async true/false 用户名和密码
send() 向服务器发送请求
Ajax写法

// An highlighted block
<script>//1.建立ajax对象var http=new XMLHttpRequest();//2.建立服务器链接http.open("get","");//第三个参数不写默认异步请求//3.发送请求http.send();//4.建立ajax事件http.onreadystatechange=function (){//readyState  4 请求读取完成//status  响应的状态码  200  500if(http.readyState==4&&http.status==200){//5.渲染界面http.responseText  http.response    json//http.responseText}}
</script>

Ajax封装

// An highlighted block
<script>function method(med, api, async, data, callback) {var http = new XMLHttpRequest();if (med == "get") {if (data) {api += "?";api += data;}http.open(med, api, async);http.send();}else {http.open(med, api, async);if (data) {http.send(data);}else {http.send();}}http.onreadystatechange = function () {if (http.readyState == 4 && http.status == 200) {callback(http.response);}}}//192.168.90.1/sue/php/read.php   读数据//192.168.90.1/sue/php/userLogin.php  用户登录   111  112method("get", "http://www.maodou.com/sue/php/userLogin.php", true, "userid=111&userpwd=112", function (result) {if (JSON.parse(result)[0].count == 1) {alert("登录成功！")}});
</script>

Ajax 跨域
协议不同、端口不同、主机名称不同
- 解决跨域（跨域资源共享）
- 报错：Access-Control-Allow-Origin 出现跨域访问
- cros ：在后端配置cros跨域请求
- jsonp ：跨域原理是通过src + callback回调函数来请求 —不是ajax

// An highlighted block
<script>function method(med, api, async, data, callback) {var http = new XMLHttpRequest();if (med == "get") {if (data) {api += "?";api += data;}http.open(med, api, async);//http.setRequestHeader("header","Access-Control-Allow-Origin:*");//http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");http.send();}else {http.open(med, api, async);if (data) {http.send(data);}else {http.send();}}http.onreadystatechange = function () {if (http.readyState == 4 && http.status == 200) {callback(http.response);}}}
</script>

JavaScript 原生Ajax相关推荐

JavaScript原生Ajax
Ajax请求一.创建XHR 1.在IE7及其更高的版本中: var xhr = new XMLHttpRequst(); 2.在IE7之前的的版本中使用createXHR函数根据IE中可用的MSXM ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
使用原生javascript实现ajax提交form表单
使用原生javascript实现ajax提交form表单 ============================ 1 准备表单首先我们需要编写一个html代码,这里我是采用nodej ...
JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
php通过js发送请求数据,使用原生javascript发送ajax请求数据的步骤
注:请求地址是自己的项目地址,请自行更改.这只是一个简单的原生XMLHttpRequst的使用,之后会发如何封装原生ajax实现jequery的ajax 第一步:创建xhr对象.const xhr = ...
Ajax→异步的JavaScript和XML、HTTP请求响应、Ajax简介同步异步、XMLHttpRequest类的方法及属性、原生Ajax、Koa实现Ajax、接口文档、浏览器同源策略、反向代理
浏览器服务器 HTTP请求响应数据库后端语言 Ajax简介同步异步 Koa前端框架 XMLHttpRequest类的方法及属性原生Ajax Koa实现Ajax JSON DOM 接口文档浏览器同 ...
ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是异步.JavaScript ...
对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
.ajax get 写法,原生Ajax写法（GET）
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

JavaScript 原生Ajax

JavaScript 原生Ajax

JavaScript 原生Ajax相关推荐

最新文章

热门文章