这是一篇笔记博客,

Ajax:

和服务器进行数据交换(异步)

用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的

同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议,端口下

在ajax中常用的一些函数:

open(method,url,async)第三个参数的默认值为true,一般不填写:
send(string):将请求发送到服务器端,post请求填写参数
request.open(“get”,”get.php”,true);request.send()
request.open(“post”,”post.php”,true); request.send()
request.open(“post”,”create.php”,true);
request.setRequestHeader(“Contend-type”,”application/x-www=form-urlencoded”);
request.send(“name=王二狗&sex=男”);
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据(比较少)
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有响应暴投
getResponseHeader():查询响应中的某个字段的值
 
readystate属性:
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已经调用了
2:请求已接受,也就是接收到了头信息
3:请求处理中,也就是接收到响应主体了
4:请求已完成,且响应已就绪,就是响应完成了
 
xmlhttprequest取得响应:
var reques=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send():
request.onreadystatechange=function(){
if(request.readystate==4&&request.status==200){
//成功之后的函数
}
原生js的ajax,get方法:
var request=new XMLHttpRequest();
request.open('GET','service.php?number='+document.getElementById('keyWord').value);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
document.getElementById('searchResult').innerHTML;
}else{
alert('error!'+request.status);
}
} ajax的post方法:
var request=new XMLHttpRequest();
request.open('POST','service.php');
var data='name='+document.getElementById('staffName').value
+"&number="+document.getElementById('staffNumber').value
+"&sex="+document.getElementById('staffSex').value
+"&job="+document.getElementById('staffJob').value;
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(data);
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
document.getElementById('createResult').innerHTML;
}else{
alert('error!'+request.status);
}
}
}

上述是不含json的ajax,现在实际操作中基本都是使用json,故什么是json

Json:javascript对象表示法

Json是存储和交换文本信息的语法,类似于XML(长度短小,读写速度更快),它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成

Json是独立于语言的,不管什么语言都可以解析json,只需要按照json的规则来

Json可以使用javascript内建的方法直接解析,转换成javascript对象,

Json数据的书写格式是:名称/值对

名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开,例如:“name”:“rose”

json的值可以是下面这些类型:

数字(整数或者浮点数)

字符串(在双引号中)

逻辑值(true false)

数组(在方括号中)

对象(在花括号中)

null

例如:

JSON对象:

JSON对象和Js对象中有两个不同:1.没有声明变量 2.没有末尾的分号,对象的属性必须加双引号

例如:

{
"name":"jeo",
"age":,
"school":{
"name":"cq",
"location":"cq"}}

JSON数组:采用数组字面量形式:没有变量和分号

[,'h1',true]

讲数组和对象结合起来:

[
{
"title":"JS",
"authors":[
"NICO"],
edition:,
year:},
{
"title":"CSS",
"authors":["JACK"],
edition:,
year:}]
get方法
var request= new XMLHttpRequest();
request.open("GET","service.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById('searchResult').innerHTML=data.msg;//服务器端的字段
}
else{
document.getElementById('searchResult').innerHTML="出现错误:"+data.msg;
} }
else{
alert('error:'+request.status)
} }
post方法
var request=new XMLHttpRequest;
request.open("POST","service.php");
var data='name:'+document.getElementById('staffName').value+
'&number:'+document.getElementById('staffNumber').value+
'&sex'+document.getElementById('staffSex').value+
'&job'+document.getElementById('staffJob').value;
request.setRequestHeader('content-Type','application/x-www-form-urlencoded');
request.send(data);
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById('createResult').innerHTML=data.msg;
}
else{
document.getElementById('createResult').innerHTML="error:"+data.msg;
}
} else{
alert('error:'+request.status)
}
}

原生js实现ajax与jquery的ajax库,及json的更多相关文章

  1. js原生ajax与jquery的ajax的用法区别

    什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...

  2. 原生js使用forEach()与jquery使用each遍历数组,return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  3. 原生JS研究:学习jquery源码,收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  4. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  5. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  6. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  7. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  8. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 通过原生js的ajax或jquery的ajax获取服务器的时间

    在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间. 客户端时间通过 javascript中的Date对象可以获取,如 var dt = new Date() ...

随机推荐

  1. maven 插件2

    Maven is - at its heart - a plugin execution framework; all work is done by plugins. Maven 本质上就是一个插件 ...

  2. linux write/wall 1

    linux:/opt/software/lktest/c # wallhellllllllllllllllllllooooooooooooooooo^[[AasZZZZZZ^Clinux:/opt/s ...

  3. eclipse gradle插件 org.gradle.tooling.GradleConnectionException: Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-3.4-bin.zip'.

    eclipse安装gradle后出现如下异常: org.gradle.tooling.GradleConnectionException: Could not install Gradle distr ...

  4. Cause: java.sql.SQLException: The user specified as a definer ('root'@'%') does not exist

    权限问题,授权 给 root 所有sql 权限 mysql> grant all privileges on *.* to root@"%" identified by &q ...

  5. APP-12-视觉技术-身份证识别

    1.Postman测试 图片转换为Base64:http://imgbase64.duoshitong.com/ Base64: Base64数据去掉表头文件:data:image/png;base6 ...

  6. input点击后的 默认边框去除

    转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...

  7. oracle第二天笔记

    多表查询 /* 多表查询: 笛卡尔积: 实际上是两张表的乘积,但是在实际开发中没有太大意义 格式: select * from 表1,表2 */ select * from emp; select * ...

  8. python 函数返回值笔记

    今天学习python时候学习到闭包和柯里化 感觉看概念时候不好理解,自己写下大概就明白点了 柯里化如下 定义一个加法函数 def add(x, y): return x + y 这是没有柯里化之前的函 ...

  9. Python基本模块介绍:sys、platform

    sys模块 常用函数 sys.argv 命令行参数,实现从程序外部向程序传递参数. sys.path 模块搜索路径. sys.platform 获取当前系统平台. sys.version 获取pyth ...

  10. impdp导入文件失败问题解决(ORA-39001/ORA-39000/ORA-39143)

    测试环境 SuSE11 + ORACLE11gR2 问题现象 执行 impdp导入现场导回的dmp文件,导入失败.错误提示如下 $impdp sysdb/oracle directory=imp_da ...